From e8b8da1d4c23c5d40b54680b5e9675b85a69e8e6 Mon Sep 17 00:00:00 2001 From: wangxinglong Date: Wed, 5 Nov 2014 22:04:11 +0800 Subject: [PATCH] cn-6to5 --- .../index.html | 8 +- .../index.html | 8 +- 2014/05/hello-world/index.html | 8 +- .../index.html | 8 +- .../index.html | 8 +- .../index.html | 8 +- .../08/what-is-next-for-javascript/index.html | 8 +- .../index.html | 8 +- .../index.html | 8 +- .../10/es6-modules-today-with-6to5/index.html | 8 +- 2014/10/javascript-unicode/index.html | 8 +- 2014/11/6to5-es6/index.html | 135 +++++++++ categories/articles/index.html | 10 +- categories/basics/index.html | 10 +- categories/cn/articles/index.html | 130 ++++++++ categories/cn/basics/index.html | 130 ++++++++ categories/cn/es6/index.html | 130 ++++++++ categories/cn/index.html | 280 ++++++++++++++++++ categories/cn/interview/index.html | 130 ++++++++ categories/cn/javascript/index.html | 130 ++++++++ categories/cn/modules/index.html | 130 ++++++++ categories/cn/scope/index.html | 130 ++++++++ categories/cn/talks/index.html | 130 ++++++++ categories/cn/tutorial/index.html | 130 ++++++++ categories/cn/unicode/index.html | 130 ++++++++ categories/cn/videos/index.html | 130 ++++++++ categories/es6/index.html | 10 +- categories/index.html | 158 ++++++++++ categories/interview/index.html | 8 +- categories/javascript/index.html | 8 +- categories/modules/index.html | 12 +- categories/pt-br/articles/index.html | 10 +- categories/pt-br/basics/index.html | 10 +- categories/pt-br/es6/index.html | 10 +- categories/pt-br/index.html | 158 ++++++++++ categories/pt-br/interview/index.html | 8 +- categories/pt-br/javascript/index.html | 8 +- categories/pt-br/modules/index.html | 12 +- categories/pt-br/scope/index.html | 10 +- categories/pt-br/talks/index.html | 14 +- categories/pt-br/tutorial/index.html | 8 +- categories/pt-br/unicode/index.html | 8 +- categories/pt-br/videos/index.html | 12 +- categories/scope/index.html | 10 +- categories/talks/index.html | 14 +- categories/tutorial/index.html | 8 +- categories/unicode/index.html | 8 +- categories/videos/index.html | 12 +- cn/2014/11/6to5-es6/index.html | 257 ++++++++++++++++ cn/index.html | 280 ++++++++++++++++++ cn/rss.xml | 145 +++++++++ harmonic.js | 48 ++- index.html | 80 ++--- .../index.html | 8 +- .../index.html | 8 +- pt-br/2014/05/hello-world/index.html | 8 +- .../index.html | 8 +- .../index.html | 8 +- .../index.html | 8 +- .../08/what-is-next-for-javascript/index.html | 8 +- .../index.html | 8 +- .../index.html | 8 +- .../10/es6-modules-today-with-6to5/index.html | 8 +- pt-br/2014/10/javascript-unicode/index.html | 8 +- pt-br/2014/11/6to5-es6/index.html | 135 +++++++++ pt-br/index.html | 80 ++--- pt-br/rss.xml | 20 +- rss.xml | 20 +- 68 files changed, 3461 insertions(+), 161 deletions(-) create mode 100644 2014/11/6to5-es6/index.html create mode 100644 categories/cn/articles/index.html create mode 100644 categories/cn/basics/index.html create mode 100644 categories/cn/es6/index.html create mode 100644 categories/cn/index.html create mode 100644 categories/cn/interview/index.html create mode 100644 categories/cn/javascript/index.html create mode 100644 categories/cn/modules/index.html create mode 100644 categories/cn/scope/index.html create mode 100644 categories/cn/talks/index.html create mode 100644 categories/cn/tutorial/index.html create mode 100644 categories/cn/unicode/index.html create mode 100644 categories/cn/videos/index.html create mode 100644 categories/index.html create mode 100644 categories/pt-br/index.html create mode 100644 cn/2014/11/6to5-es6/index.html create mode 100644 cn/index.html create mode 100644 cn/rss.xml create mode 100644 pt-br/2014/11/6to5-es6/index.html diff --git a/2014/05/ecmascript-6-a-better-javascript-for-the-ambient-computing-era/index.html b/2014/05/ecmascript-6-a-better-javascript-for-the-ambient-computing-era/index.html index a987feb..23c3385 100644 --- a/2014/05/ecmascript-6-a-better-javascript-for-the-ambient-computing-era/index.html +++ b/2014/05/ecmascript-6-a-better-javascript-for-the-ambient-computing-era/index.html @@ -27,6 +27,12 @@ +
  • + + cn + +
  • + @@ -83,7 +89,7 @@

    - By Jaydson at + By Jaydson at

    Allen Wirfs-Brock (awbjs on Twitter) is a TC39 member. Actually, he is the "Project Editor of the ECMAScript Language Specification". diff --git a/2014/05/ecmascript-6-the-future-is-here/index.html b/2014/05/ecmascript-6-the-future-is-here/index.html index 165c5d2..5b1b406 100644 --- a/2014/05/ecmascript-6-the-future-is-here/index.html +++ b/2014/05/ecmascript-6-the-future-is-here/index.html @@ -27,6 +27,12 @@ +

  • + + cn + +
  • + @@ -76,7 +82,7 @@

    - By Jaydson at + By Jaydson at

    A talk by Sebastiano Armeli showing some of the ES6 features like scoping, generators, collections, modules and proxies. diff --git a/2014/05/hello-world/index.html b/2014/05/hello-world/index.html index ae0e891..47306a2 100644 --- a/2014/05/hello-world/index.html +++ b/2014/05/hello-world/index.html @@ -27,6 +27,12 @@ +

  • + + cn + +
  • + @@ -83,7 +89,7 @@

    - By Jaydson at + By Jaydson at

    Hello everybody, welcome to ES6Rocks!
    The mission here is to discuss about JavaScript's next version , aka Harmony or ES.next.

    diff --git a/2014/05/practical-workflows-es6-modules/index.html b/2014/05/practical-workflows-es6-modules/index.html index 752fedc..4fa1429 100644 --- a/2014/05/practical-workflows-es6-modules/index.html +++ b/2014/05/practical-workflows-es6-modules/index.html @@ -27,6 +27,12 @@ +
  • + + cn + +
  • + @@ -83,7 +89,7 @@

    - By Jaydson at + By Jaydson at

    Guy Bedford gave an awesome talk about a practical workflows with ES6 modules last month at Fluent Conf.
    Also, he write up an article about it. If you are interested on this subject, you must read the full article.
    diff --git a/2014/07/a-new-syntax-for-modules-in-es6/index.html b/2014/07/a-new-syntax-for-modules-in-es6/index.html index d1f0632..2cd2819 100644 --- a/2014/07/a-new-syntax-for-modules-in-es6/index.html +++ b/2014/07/a-new-syntax-for-modules-in-es6/index.html @@ -27,6 +27,12 @@ +

  • + + cn + +
  • + @@ -76,7 +82,7 @@

    - By Jean Carlo Emer at + By Jean Carlo Emer at

    TC39 - ECMAScript group is finishing the sixth version of the ECMAScript specification. The group schedule points to next June as the release date. By now, no significant differences may appear. It is time to deepen your knowledge into the subject.

    diff --git a/2014/07/es6-interview-with-david-herman/index.html b/2014/07/es6-interview-with-david-herman/index.html index 96eabd3..0c81d77 100644 --- a/2014/07/es6-interview-with-david-herman/index.html +++ b/2014/07/es6-interview-with-david-herman/index.html @@ -27,6 +27,12 @@ +
  • + + cn + +
  • + @@ -83,7 +89,7 @@

    - By Jaydson at + By Jaydson at

    We did a nice interview with David Herman about his thoughts about ES6. diff --git a/2014/08/what-is-next-for-javascript/index.html b/2014/08/what-is-next-for-javascript/index.html index a041ae8..e2fc5d0 100644 --- a/2014/08/what-is-next-for-javascript/index.html +++ b/2014/08/what-is-next-for-javascript/index.html @@ -27,6 +27,12 @@ +

  • + + cn + +
  • + @@ -83,7 +89,7 @@

    - By at + By at

    If you're interested in ES6 you must follow Dr. Axel Rauschmayer.
    He maintains the awesome 2ality blog and writes a lot of good stuff around ES6.
    In those slides, he cover a lot of new ES6 features and show us what we can expect for the future.

    diff --git a/2014/08/what-you-need-to-know-about-block-scope-let/index.html b/2014/08/what-you-need-to-know-about-block-scope-let/index.html index f557e30..488a39b 100644 --- a/2014/08/what-you-need-to-know-about-block-scope-let/index.html +++ b/2014/08/what-you-need-to-know-about-block-scope-let/index.html @@ -27,6 +27,12 @@ +
  • + + cn + +
  • + @@ -90,7 +96,7 @@

    - By Jaydson at + By Jaydson at

    Variables declaration in any programming language are something pretty basic.
    Regardless the language, understanding how variable scope works is essential to write any kind of program.
    In Python, for example, as well as in most languages​​, there are two scopes: Local and Global.
    Variables defined at the top of the file, without identation, are global scope variables.
    Variables declared inside the function body are considered as local scope.
    So far, everything is very similar. In JavaScript, the behavior is quite similar.
    Let's see one example in both languages:

    diff --git a/2014/10/arrow-functions-and-their-scope/index.html b/2014/10/arrow-functions-and-their-scope/index.html index 6e6de66..d8e2ad8 100644 --- a/2014/10/arrow-functions-and-their-scope/index.html +++ b/2014/10/arrow-functions-and-their-scope/index.html @@ -27,6 +27,12 @@ +
  • + + cn + +
  • + @@ -90,7 +96,7 @@

    - By Felipe N. Moura at + By Felipe N. Moura at

    Among so many great new features in ES6, Arrow Functions (or Fat Arrow Functions) is one that deserves attention! diff --git a/2014/10/es6-modules-today-with-6to5/index.html b/2014/10/es6-modules-today-with-6to5/index.html index 6dd9531..fc3ca7d 100644 --- a/2014/10/es6-modules-today-with-6to5/index.html +++ b/2014/10/es6-modules-today-with-6to5/index.html @@ -27,6 +27,12 @@ +

  • + + cn + +
  • + @@ -83,7 +89,7 @@

    - By Jaydson Gomes at + By Jaydson Gomes at

    I've posted the image below on Twitter showing how happy I was.
    It's great what transpilers can do. In JavaScript's World it's like a time machine we can forward to the near future of awesomeness ES6 will bring.
    In this tutorial we'll show how to start writing ES6 modules today, using the awesome 6to5.

    diff --git a/2014/10/javascript-unicode/index.html b/2014/10/javascript-unicode/index.html index 280e9b7..c1a91ea 100644 --- a/2014/10/javascript-unicode/index.html +++ b/2014/10/javascript-unicode/index.html @@ -27,6 +27,12 @@ +
  • + + cn + +
  • + @@ -83,7 +89,7 @@

    - By at + By at

    Mathias Bynens gave an awesome talk on the last JSConfEU edition.
    He talked about Unicode in JavaScript, and if you need to work hard with strings, you MUST watch this talk.
    Actually, even if you're not working hard with strings and JavaScript, those Unicode tricks presented by Mathias are pretty usefull.

    diff --git a/2014/11/6to5-es6/index.html b/2014/11/6to5-es6/index.html new file mode 100644 index 0000000..44b04c8 --- /dev/null +++ b/2014/11/6to5-es6/index.html @@ -0,0 +1,135 @@ + + + + + 使用6to5,让今天就来写ES6的模块化开发! - ES6 Rocks + + + + + + + + + + + +
    +

    + + + + +

    +

    + 使用6to5,让今天就来写ES6的模块化开发! +

    +
    + + +
    + By at +
    +
    +

    使用6to5,让今天就来写ES6的模块化开发!

    + +
    + +
    +
    + + + comments powered by Disqus +
    + + + + + + + + + + + + \ No newline at end of file diff --git a/categories/articles/index.html b/categories/articles/index.html index e494af8..909b4d0 100644 --- a/categories/articles/index.html +++ b/categories/articles/index.html @@ -27,6 +27,12 @@ +
  • + + cn + +
  • + @@ -68,7 +74,7 @@

  • @@ -363,7 +369,7 @@

    Conclusion

  • +
  • + + cn + +
  • + @@ -68,7 +74,7 @@

  • @@ -363,7 +369,7 @@

    Conclusion

  • diff --git a/categories/cn/articles/index.html b/categories/cn/articles/index.html new file mode 100644 index 0000000..f6d38d0 --- /dev/null +++ b/categories/cn/articles/index.html @@ -0,0 +1,130 @@ + + + + + ES6 Rocks + + + + + + + + + + +
    +
    +

    + ES6 Rocks +

    + + + +
    +
    + +
    +
      + +
    +
    + + +
    + +
    + + + + + + + \ No newline at end of file diff --git a/categories/cn/basics/index.html b/categories/cn/basics/index.html new file mode 100644 index 0000000..f6d38d0 --- /dev/null +++ b/categories/cn/basics/index.html @@ -0,0 +1,130 @@ + + + + + ES6 Rocks + + + + + + + + + + +
    +
    +

    + ES6 Rocks +

    + + + +
    +
    + +
    +
      + +
    +
    + + +
    + +
    + + + + + + + \ No newline at end of file diff --git a/categories/cn/es6/index.html b/categories/cn/es6/index.html new file mode 100644 index 0000000..f6d38d0 --- /dev/null +++ b/categories/cn/es6/index.html @@ -0,0 +1,130 @@ + + + + + ES6 Rocks + + + + + + + + + + +
    +
    +

    + ES6 Rocks +

    + + + +
    +
    + +
    +
      + +
    +
    + + +
    + +
    + + + + + + + \ No newline at end of file diff --git a/categories/cn/index.html b/categories/cn/index.html new file mode 100644 index 0000000..886117e --- /dev/null +++ b/categories/cn/index.html @@ -0,0 +1,280 @@ + + + + + ES6 Rocks + + + + + + + + + + +
    +
    +

    + ES6 Rocks +

    + + + +
    +
    + +
    +
      + +
    • + +
      + + 使用6to5,让今天就来写ES6的模块化开发! + +
      +

      使用6to5,让今天就来写ES6的模块化开发!

      +

      我之前在Twitter上发过一个照片,表达出我有多快乐,这像是一个时光机让我们可以穿梭到未来-ES6的时代!下面让我来展示如何使用6to5让今天就可以练手ES6的模块化。

      +
      + + home + +
      使用6to5让今天就可以练手ES6的模块化
      +
      + +

      第一步

      +

      如果你现在还不了解ES6的模块化开发,请在JSModules.io上了解一下。我也推荐大家读一下@jcemer的文章A new syntax for modules in ES6,它涉及到了很多非常酷的关于JS模块化的东西。他可以指导我们使用6to5。总的来说,6to5能在支持ES5d的环境下提前尝试ES6 模块化开发的快感。 +6to5比其他降级工具有一下几个优势:

      +
        +
      • 可读性:你的格式化的代码尽可能的保留。
      • +
      • 可扩展性:有非常庞大的插件库和浏览器的支持。
      • +
      • 可调式性:因为支持source map,你可以方便的调试已经编译过后的代码
      • +
      • 高效率:直接转化为与ES相当的代码,不会增加额外的运行十几
      • +
      +

      一起来写模块

      +

      让我们来尝试着写模块吧! +我们的应用除了输出日志不会做其他事情,其主要的目的就是让你了解模块化如何工作和如何让你现有的环境使用ES6的模块化开发。 +基本的目录结构:

      +
      ├── Gruntfile.js
      +├── package.json
      +└── src
      +    ├── app.js
      +    ├── modules
      +    │   ├── bar.js
      +    │   ├── baz.js
      +    │   └── foo.js
      +    └── sample
      +        └── index.html
      +

      app.js是主程序,包含了我们将要存储的模块化的目录 +下面是app.js的代码:

      +
      import foo from "./modules/foo";
      +import bar from "./modules/bar";
      +
      +console.log('From module foo >>> ', foo);
      +console.log('From module bar >>> ', bar);
      +
      +

      以上代码非常简单,我们导入了foo模块和bar模块,然后分别打印出他们

      +
      // foo.js
      +let foo = 'foo';
      +
      +export default foo;
      +
      +
      +// bar.js
      +let bar = 'bar';
      +
      +export default bar;
      +
      +

      在这些模块一面我们只是导出了两个字符串'foo'和'bar',当我们导入这些模块,我们的变量其实已经有数据。 +当然,我们何以导出对象,类,函数,等等 +现在,你可以开始模仿这个例子写出你自己的模块

      +

      构建

      +

      就像你已经知道的,ES6不支持你现在的浏览器和Node.js,只有一条路,那就是使用降级转换器来编写ES6的模块化代码。 +正如我之前提到的那个,我使用6to5,他可以精确的达到我们想要的效果。 +这个任务是运行在Grunt上的,我们使用 @sindresorhus的 grunt-6to5

      +
      npm install grunt-cli -g
      +npm install grunt --save-dev
      +npm install grunt-6to5 --save-dev
      +
      +

      我们的Gruntfile类似于一下:

      +
      grunt.initConfig({
      +    '6to5': {
      +        options: {
      +            modules: 'common'
      +        },
      +
      +        build: {
      +            files: [{
      +                expand: true,
      +                cwd: 'src/',
      +                src: ['**/*.js'],
      +                dest: 'dist/',
      +            }],
      +        }
      +    }
      +});
      +
      +

      这是个简单又给力的配置,我们也几乎完成了。 +当你指定好源文件和输出文件后,这个任务就可以来运行了。 +'common'选项的目的在于告诉6to5我们将输出ES5CommonJS模块化风格。 +当然,6to5也支持AMD,我写了sample/index.html,让他在浏览器环境下测试一下,这个HTML的代码如下:

      +
      <!doctype html>
      +<html lang="en">
      +<head>
      +    <meta charset="UTF-8">
      +    <title>ES6 modules 6to5</title>
      +</head>
      +<body>
      +    <script src="//[cdnjs URL]/require.min.js"></script>
      +    <script>
      +        require(['app.js']);
      +    </script>
      +</body>
      +</html>
      +
      +

      观察上面的代码,我们使用AMD的RequireJS框架来加载这个JS,对于这个例子,你需要将上面的配置文件改为 modules: 'amd'

      +

      运行

      +

      万事俱备东风只欠,我们的代码已经放在es6-modules-today-with-6to5,你可以克隆下来自己玩玩。使用npm install安装6to5

      +

      记住一点,Grunt任务会生成一个目标文件夹来存放转化后的代码 +所以,如果你想测试使用CommonJS规范的转化后的ES6的代码,你可以执行一下命令

      +
      node dist/app.js
      +
      +
      + + home + +
      Node.js上的运行效果
      +
      + +

      如果你使用AMD规范的,请在浏览器访问index.html(吐槽一下,老外竟然不知道中国的sea.js)

      +
      + + home + +
      在浏览器执行的效果
      +
      + +

      结论

      +

      通过这个简单的实例你学会了如果简单的使用ES6模块化风格来编写代码。6to5是胃肠棒的工具让你穿越到未来提前体验ES6模块化带来的快感。资源下载es6-modules-today-with-6to5,欢迎提交一些问题的反馈

      + +
      +
      + +
    • + +
    +
    + + +
    + +
    + + + + + + + \ No newline at end of file diff --git a/categories/cn/interview/index.html b/categories/cn/interview/index.html new file mode 100644 index 0000000..f6d38d0 --- /dev/null +++ b/categories/cn/interview/index.html @@ -0,0 +1,130 @@ + + + + + ES6 Rocks + + + + + + + + + + +
    +
    +

    + ES6 Rocks +

    + + + +
    +
    + +
    +
      + +
    +
    + + +
    + +
    + + + + + + + \ No newline at end of file diff --git a/categories/cn/javascript/index.html b/categories/cn/javascript/index.html new file mode 100644 index 0000000..f6d38d0 --- /dev/null +++ b/categories/cn/javascript/index.html @@ -0,0 +1,130 @@ + + + + + ES6 Rocks + + + + + + + + + + +
    +
    +

    + ES6 Rocks +

    + + + +
    +
    + +
    +
      + +
    +
    + + +
    + +
    + + + + + + + \ No newline at end of file diff --git a/categories/cn/modules/index.html b/categories/cn/modules/index.html new file mode 100644 index 0000000..f6d38d0 --- /dev/null +++ b/categories/cn/modules/index.html @@ -0,0 +1,130 @@ + + + + + ES6 Rocks + + + + + + + + + + +
    +
    +

    + ES6 Rocks +

    + + + +
    +
    + +
    +
      + +
    +
    + + +
    + +
    + + + + + + + \ No newline at end of file diff --git a/categories/cn/scope/index.html b/categories/cn/scope/index.html new file mode 100644 index 0000000..f6d38d0 --- /dev/null +++ b/categories/cn/scope/index.html @@ -0,0 +1,130 @@ + + + + + ES6 Rocks + + + + + + + + + + +
    +
    +

    + ES6 Rocks +

    + + + +
    +
    + +
    +
      + +
    +
    + + +
    + +
    + + + + + + + \ No newline at end of file diff --git a/categories/cn/talks/index.html b/categories/cn/talks/index.html new file mode 100644 index 0000000..f6d38d0 --- /dev/null +++ b/categories/cn/talks/index.html @@ -0,0 +1,130 @@ + + + + + ES6 Rocks + + + + + + + + + + +
    +
    +

    + ES6 Rocks +

    + + + +
    +
    + +
    +
      + +
    +
    + + +
    + +
    + + + + + + + \ No newline at end of file diff --git a/categories/cn/tutorial/index.html b/categories/cn/tutorial/index.html new file mode 100644 index 0000000..f6d38d0 --- /dev/null +++ b/categories/cn/tutorial/index.html @@ -0,0 +1,130 @@ + + + + + ES6 Rocks + + + + + + + + + + +
    +
    +

    + ES6 Rocks +

    + + + +
    +
    + +
    +
      + +
    +
    + + +
    + +
    + + + + + + + \ No newline at end of file diff --git a/categories/cn/unicode/index.html b/categories/cn/unicode/index.html new file mode 100644 index 0000000..f6d38d0 --- /dev/null +++ b/categories/cn/unicode/index.html @@ -0,0 +1,130 @@ + + + + + ES6 Rocks + + + + + + + + + + +
    +
    +

    + ES6 Rocks +

    + + + +
    +
    + +
    +
      + +
    +
    + + +
    + +
    + + + + + + + \ No newline at end of file diff --git a/categories/cn/videos/index.html b/categories/cn/videos/index.html new file mode 100644 index 0000000..f6d38d0 --- /dev/null +++ b/categories/cn/videos/index.html @@ -0,0 +1,130 @@ + + + + + ES6 Rocks + + + + + + + + + + +
    +
    +

    + ES6 Rocks +

    + + + +
    +
    + +
    +
      + +
    +
    + + +
    + +
    + + + + + + + \ No newline at end of file diff --git a/categories/es6/index.html b/categories/es6/index.html index 149ac4d..8aec6e2 100644 --- a/categories/es6/index.html +++ b/categories/es6/index.html @@ -27,6 +27,12 @@
  • +
  • + + cn + +
  • + @@ -68,7 +74,7 @@

  • @@ -97,7 +103,7 @@

  • diff --git a/categories/index.html b/categories/index.html new file mode 100644 index 0000000..6328646 --- /dev/null +++ b/categories/index.html @@ -0,0 +1,158 @@ + + + + + ES6 Rocks + + + + + + + + + + +
    +
    +

    + ES6 Rocks +

    + + + +
    +
    + +
    + +
    + + +
    + +
    + + + + + + + \ No newline at end of file diff --git a/categories/interview/index.html b/categories/interview/index.html index be99907..d23acae 100644 --- a/categories/interview/index.html +++ b/categories/interview/index.html @@ -27,6 +27,12 @@
  • +
  • + + cn + +
  • + @@ -68,7 +74,7 @@

  • +
  • + + cn + +
  • + @@ -68,7 +74,7 @@

  • +
  • + + cn + +
  • + @@ -68,7 +74,7 @@

  • @@ -180,7 +186,7 @@

    Conclusion

  • @@ -209,7 +215,7 @@

    Conclusion

  • +
  • + + cn + +
  • + @@ -68,7 +74,7 @@

  • @@ -360,7 +366,7 @@

    Conclusão

  • +
  • + + cn + +
  • + @@ -68,7 +74,7 @@

  • @@ -360,7 +366,7 @@

    Conclusão

  • +
  • + + cn + +
  • + @@ -68,7 +74,7 @@

  • @@ -96,7 +102,7 @@

  • diff --git a/categories/pt-br/index.html b/categories/pt-br/index.html new file mode 100644 index 0000000..5fab5fd --- /dev/null +++ b/categories/pt-br/index.html @@ -0,0 +1,158 @@ + + + + + ES6 Rocks + + + + + + + + + + +
    +
    +

    + ES6 Rocks +

    + + + +
    +
    + +
    + +
    + + +
    + +
    + + + + + + + \ No newline at end of file diff --git a/categories/pt-br/interview/index.html b/categories/pt-br/interview/index.html index e9a9ed7..b4e2af7 100644 --- a/categories/pt-br/interview/index.html +++ b/categories/pt-br/interview/index.html @@ -27,6 +27,12 @@
  • +
  • + + cn + +
  • + @@ -68,7 +74,7 @@

  • +
  • + + cn + +
  • + @@ -68,7 +74,7 @@

  • +
  • + + cn + +
  • + @@ -68,7 +74,7 @@

  • @@ -179,7 +185,7 @@

    Conclusão

  • @@ -208,7 +214,7 @@

    Conclusão

  • +
  • + + cn + +
  • + @@ -68,7 +74,7 @@

  • @@ -360,7 +366,7 @@

    Conclusão

  • +
  • + + cn + +
  • + @@ -68,7 +74,7 @@

  • @@ -99,7 +105,7 @@

  • @@ -128,7 +134,7 @@

  • @@ -156,7 +162,7 @@

  • +
  • + + cn + +
  • + @@ -68,7 +74,7 @@

  • +
  • + + cn + +
  • + @@ -68,7 +74,7 @@

  • +
  • + + cn + +
  • + @@ -68,7 +74,7 @@

  • @@ -96,7 +102,7 @@

  • @@ -127,7 +133,7 @@

  • +
  • + + cn + +
  • + @@ -68,7 +74,7 @@

  • @@ -363,7 +369,7 @@

    Conclusion

  • +
  • + + cn + +
  • + @@ -68,7 +74,7 @@

  • @@ -99,7 +105,7 @@

  • @@ -127,7 +133,7 @@

  • @@ -155,7 +161,7 @@

  • +
  • + + cn + +
  • + @@ -68,7 +74,7 @@

  • +
  • + + cn + +
  • + @@ -68,7 +74,7 @@

  • +
  • + + cn + +
  • + @@ -68,7 +74,7 @@

  • @@ -96,7 +102,7 @@

  • @@ -127,7 +133,7 @@

  • diff --git a/cn/2014/11/6to5-es6/index.html b/cn/2014/11/6to5-es6/index.html new file mode 100644 index 0000000..300193a --- /dev/null +++ b/cn/2014/11/6to5-es6/index.html @@ -0,0 +1,257 @@ + + + + + 使用6to5,让今天就来写ES6的模块化开发! - ES6 Rocks + + + + + + + + + + + +
    +

    + + + + +

    +

    + 使用6to5,让今天就来写ES6的模块化开发! +

    +
    + + +
    + By at +
    +
    +

    使用6to5,让今天就来写ES6的模块化开发!

    +

    我之前在Twitter上发过一个照片,表达出我有多快乐,这像是一个时光机让我们可以穿梭到未来-ES6的时代!下面让我来展示如何使用6to5让今天就可以练手ES6的模块化。

    +
    + + home + +
    使用6to5让今天就可以练手ES6的模块化
    +
    + +

    第一步

    +

    如果你现在还不了解ES6的模块化开发,请在JSModules.io上了解一下。我也推荐大家读一下@jcemer的文章A new syntax for modules in ES6,它涉及到了很多非常酷的关于JS模块化的东西。他可以指导我们使用6to5。总的来说,6to5能在支持ES5d的环境下提前尝试ES6 模块化开发的快感。 +6to5比其他降级工具有一下几个优势:

    +
      +
    • 可读性:你的格式化的代码尽可能的保留。
    • +
    • 可扩展性:有非常庞大的插件库和浏览器的支持。
    • +
    • 可调式性:因为支持source map,你可以方便的调试已经编译过后的代码
    • +
    • 高效率:直接转化为与ES相当的代码,不会增加额外的运行十几
    • +
    +

    一起来写模块

    +

    让我们来尝试着写模块吧! +我们的应用除了输出日志不会做其他事情,其主要的目的就是让你了解模块化如何工作和如何让你现有的环境使用ES6的模块化开发。 +基本的目录结构:

    +
    ├── Gruntfile.js
    +├── package.json
    +└── src
    +    ├── app.js
    +    ├── modules
    +    │   ├── bar.js
    +    │   ├── baz.js
    +    │   └── foo.js
    +    └── sample
    +        └── index.html
    +

    app.js是主程序,包含了我们将要存储的模块化的目录 +下面是app.js的代码:

    +
    import foo from "./modules/foo";
    +import bar from "./modules/bar";
    +
    +console.log('From module foo >>> ', foo);
    +console.log('From module bar >>> ', bar);
    +
    +

    以上代码非常简单,我们导入了foo模块和bar模块,然后分别打印出他们

    +
    // foo.js
    +let foo = 'foo';
    +
    +export default foo;
    +
    +
    +// bar.js
    +let bar = 'bar';
    +
    +export default bar;
    +
    +

    在这些模块一面我们只是导出了两个字符串'foo'和'bar',当我们导入这些模块,我们的变量其实已经有数据。 +当然,我们何以导出对象,类,函数,等等 +现在,你可以开始模仿这个例子写出你自己的模块

    +

    构建

    +

    就像你已经知道的,ES6不支持你现在的浏览器和Node.js,只有一条路,那就是使用降级转换器来编写ES6的模块化代码。 +正如我之前提到的那个,我使用6to5,他可以精确的达到我们想要的效果。 +这个任务是运行在Grunt上的,我们使用 @sindresorhus的 grunt-6to5

    +
    npm install grunt-cli -g
    +npm install grunt --save-dev
    +npm install grunt-6to5 --save-dev
    +
    +

    我们的Gruntfile类似于一下:

    +
    grunt.initConfig({
    +    '6to5': {
    +        options: {
    +            modules: 'common'
    +        },
    +
    +        build: {
    +            files: [{
    +                expand: true,
    +                cwd: 'src/',
    +                src: ['**/*.js'],
    +                dest: 'dist/',
    +            }],
    +        }
    +    }
    +});
    +
    +

    这是个简单又给力的配置,我们也几乎完成了。 +当你指定好源文件和输出文件后,这个任务就可以来运行了。 +'common'选项的目的在于告诉6to5我们将输出ES5CommonJS模块化风格。 +当然,6to5也支持AMD,我写了sample/index.html,让他在浏览器环境下测试一下,这个HTML的代码如下:

    +
    <!doctype html>
    +<html lang="en">
    +<head>
    +    <meta charset="UTF-8">
    +    <title>ES6 modules 6to5</title>
    +</head>
    +<body>
    +    <script src="//[cdnjs URL]/require.min.js"></script>
    +    <script>
    +        require(['app.js']);
    +    </script>
    +</body>
    +</html>
    +
    +

    观察上面的代码,我们使用AMD的RequireJS框架来加载这个JS,对于这个例子,你需要将上面的配置文件改为 modules: 'amd'

    +

    运行

    +

    万事俱备东风只欠,我们的代码已经放在es6-modules-today-with-6to5,你可以克隆下来自己玩玩。使用npm install安装6to5

    +

    记住一点,Grunt任务会生成一个目标文件夹来存放转化后的代码 +所以,如果你想测试使用CommonJS规范的转化后的ES6的代码,你可以执行一下命令

    +
    node dist/app.js
    +
    +
    + + home + +
    Node.js上的运行效果
    +
    + +

    如果你使用AMD规范的,请在浏览器访问index.html(吐槽一下,老外竟然不知道中国的sea.js)

    +
    + + home + +
    在浏览器执行的效果
    +
    + +

    结论

    +

    通过这个简单的实例你学会了如果简单的使用ES6模块化风格来编写代码。6to5是胃肠棒的工具让你穿越到未来提前体验ES6模块化带来的快感。资源下载es6-modules-today-with-6to5,欢迎提交一些问题的反馈

    + +
    + +
    +
    + + + comments powered by Disqus +
    + + + + + + + + + + + + \ No newline at end of file diff --git a/cn/index.html b/cn/index.html new file mode 100644 index 0000000..886117e --- /dev/null +++ b/cn/index.html @@ -0,0 +1,280 @@ + + + + + ES6 Rocks + + + + + + + + + + +
    +
    +

    + ES6 Rocks +

    + + + +
    +
    + +
    +
      + +
    • + +
      + + 使用6to5,让今天就来写ES6的模块化开发! + +
      +

      使用6to5,让今天就来写ES6的模块化开发!

      +

      我之前在Twitter上发过一个照片,表达出我有多快乐,这像是一个时光机让我们可以穿梭到未来-ES6的时代!下面让我来展示如何使用6to5让今天就可以练手ES6的模块化。

      +
      + + home + +
      使用6to5让今天就可以练手ES6的模块化
      +
      + +

      第一步

      +

      如果你现在还不了解ES6的模块化开发,请在JSModules.io上了解一下。我也推荐大家读一下@jcemer的文章A new syntax for modules in ES6,它涉及到了很多非常酷的关于JS模块化的东西。他可以指导我们使用6to5。总的来说,6to5能在支持ES5d的环境下提前尝试ES6 模块化开发的快感。 +6to5比其他降级工具有一下几个优势:

      +
        +
      • 可读性:你的格式化的代码尽可能的保留。
      • +
      • 可扩展性:有非常庞大的插件库和浏览器的支持。
      • +
      • 可调式性:因为支持source map,你可以方便的调试已经编译过后的代码
      • +
      • 高效率:直接转化为与ES相当的代码,不会增加额外的运行十几
      • +
      +

      一起来写模块

      +

      让我们来尝试着写模块吧! +我们的应用除了输出日志不会做其他事情,其主要的目的就是让你了解模块化如何工作和如何让你现有的环境使用ES6的模块化开发。 +基本的目录结构:

      +
      ├── Gruntfile.js
      +├── package.json
      +└── src
      +    ├── app.js
      +    ├── modules
      +    │   ├── bar.js
      +    │   ├── baz.js
      +    │   └── foo.js
      +    └── sample
      +        └── index.html
      +

      app.js是主程序,包含了我们将要存储的模块化的目录 +下面是app.js的代码:

      +
      import foo from "./modules/foo";
      +import bar from "./modules/bar";
      +
      +console.log('From module foo >>> ', foo);
      +console.log('From module bar >>> ', bar);
      +
      +

      以上代码非常简单,我们导入了foo模块和bar模块,然后分别打印出他们

      +
      // foo.js
      +let foo = 'foo';
      +
      +export default foo;
      +
      +
      +// bar.js
      +let bar = 'bar';
      +
      +export default bar;
      +
      +

      在这些模块一面我们只是导出了两个字符串'foo'和'bar',当我们导入这些模块,我们的变量其实已经有数据。 +当然,我们何以导出对象,类,函数,等等 +现在,你可以开始模仿这个例子写出你自己的模块

      +

      构建

      +

      就像你已经知道的,ES6不支持你现在的浏览器和Node.js,只有一条路,那就是使用降级转换器来编写ES6的模块化代码。 +正如我之前提到的那个,我使用6to5,他可以精确的达到我们想要的效果。 +这个任务是运行在Grunt上的,我们使用 @sindresorhus的 grunt-6to5

      +
      npm install grunt-cli -g
      +npm install grunt --save-dev
      +npm install grunt-6to5 --save-dev
      +
      +

      我们的Gruntfile类似于一下:

      +
      grunt.initConfig({
      +    '6to5': {
      +        options: {
      +            modules: 'common'
      +        },
      +
      +        build: {
      +            files: [{
      +                expand: true,
      +                cwd: 'src/',
      +                src: ['**/*.js'],
      +                dest: 'dist/',
      +            }],
      +        }
      +    }
      +});
      +
      +

      这是个简单又给力的配置,我们也几乎完成了。 +当你指定好源文件和输出文件后,这个任务就可以来运行了。 +'common'选项的目的在于告诉6to5我们将输出ES5CommonJS模块化风格。 +当然,6to5也支持AMD,我写了sample/index.html,让他在浏览器环境下测试一下,这个HTML的代码如下:

      +
      <!doctype html>
      +<html lang="en">
      +<head>
      +    <meta charset="UTF-8">
      +    <title>ES6 modules 6to5</title>
      +</head>
      +<body>
      +    <script src="//[cdnjs URL]/require.min.js"></script>
      +    <script>
      +        require(['app.js']);
      +    </script>
      +</body>
      +</html>
      +
      +

      观察上面的代码,我们使用AMD的RequireJS框架来加载这个JS,对于这个例子,你需要将上面的配置文件改为 modules: 'amd'

      +

      运行

      +

      万事俱备东风只欠,我们的代码已经放在es6-modules-today-with-6to5,你可以克隆下来自己玩玩。使用npm install安装6to5

      +

      记住一点,Grunt任务会生成一个目标文件夹来存放转化后的代码 +所以,如果你想测试使用CommonJS规范的转化后的ES6的代码,你可以执行一下命令

      +
      node dist/app.js
      +
      +
      + + home + +
      Node.js上的运行效果
      +
      + +

      如果你使用AMD规范的,请在浏览器访问index.html(吐槽一下,老外竟然不知道中国的sea.js)

      +
      + + home + +
      在浏览器执行的效果
      +
      + +

      结论

      +

      通过这个简单的实例你学会了如果简单的使用ES6模块化风格来编写代码。6to5是胃肠棒的工具让你穿越到未来提前体验ES6模块化带来的快感。资源下载es6-modules-today-with-6to5,欢迎提交一些问题的反馈

      + +
      +
      + +
    • + +
    +
    + + +
    + +
    + + + + + + + \ No newline at end of file diff --git a/cn/rss.xml b/cn/rss.xml new file mode 100644 index 0000000..7d2bec8 --- /dev/null +++ b/cn/rss.xml @@ -0,0 +1,145 @@ + + + + ES6 Rocks + http://es6rocks.com + A website dedicated to teach all about ES6 + ES6 Rocks + ES6 Rocks + Wed, 05 Nov 2014 13:23:27 GMT + cn + + + + 使用6to5,让今天就来写ES6的模块化开发! + http://es6rocks.com/cn/2014/11/6to5-es6 + 使用6to5,让今天就来写ES6的模块化开发!
  • +

    我之前在Twitter上发过一个照片,表达出我有多快乐,这像是一个时光机让我们可以穿梭到未来-ES6的时代!下面让我来展示如何使用6to5让今天就可以练手ES6的模块化。

    +
    + + home + +
    使用6to5让今天就可以练手ES6的模块化
    +
    + +

    第一步

    +

    如果你现在还不了解ES6的模块化开发,请在JSModules.io上了解一下。我也推荐大家读一下@jcemer的文章A new syntax for modules in ES6,它涉及到了很多非常酷的关于JS模块化的东西。他可以指导我们使用6to5。总的来说,6to5能在支持ES5d的环境下提前尝试ES6 模块化开发的快感。 +6to5比其他降级工具有一下几个优势:

    +
      +
    • 可读性:你的格式化的代码尽可能的保留。
    • +
    • 可扩展性:有非常庞大的插件库和浏览器的支持。
    • +
    • 可调式性:因为支持source map,你可以方便的调试已经编译过后的代码
    • +
    • 高效率:直接转化为与ES相当的代码,不会增加额外的运行十几
    • +
    +

    一起来写模块

    +

    让我们来尝试着写模块吧! +我们的应用除了输出日志不会做其他事情,其主要的目的就是让你了解模块化如何工作和如何让你现有的环境使用ES6的模块化开发。 +基本的目录结构:

    +
    ├── Gruntfile.js
    +├── package.json
    +└── src
    +    ├── app.js
    +    ├── modules
    +    │   ├── bar.js
    +    │   ├── baz.js
    +    │   └── foo.js
    +    └── sample
    +        └── index.html
    +

    app.js是主程序,包含了我们将要存储的模块化的目录 +下面是app.js的代码:

    +
    import foo from "./modules/foo";
    +import bar from "./modules/bar";
    +
    +console.log('From module foo >>> ', foo);
    +console.log('From module bar >>> ', bar);
    +
    +

    以上代码非常简单,我们导入了foo模块和bar模块,然后分别打印出他们

    +
    // foo.js
    +let foo = 'foo';
    +
    +export default foo;
    +
    +
    +// bar.js
    +let bar = 'bar';
    +
    +export default bar;
    +
    +

    在这些模块一面我们只是导出了两个字符串'foo'和'bar',当我们导入这些模块,我们的变量其实已经有数据。 +当然,我们何以导出对象,类,函数,等等 +现在,你可以开始模仿这个例子写出你自己的模块

    +

    构建

    +

    就像你已经知道的,ES6不支持你现在的浏览器和Node.js,只有一条路,那就是使用降级转换器来编写ES6的模块化代码。 +正如我之前提到的那个,我使用6to5,他可以精确的达到我们想要的效果。 +这个任务是运行在Grunt上的,我们使用 @sindresorhus的 grunt-6to5

    +
    npm install grunt-cli -g
    +npm install grunt --save-dev
    +npm install grunt-6to5 --save-dev
    +
    +

    我们的Gruntfile类似于一下:

    +
    grunt.initConfig({
    +    '6to5': {
    +        options: {
    +            modules: 'common'
    +        },
    +
    +        build: {
    +            files: [{
    +                expand: true,
    +                cwd: 'src/',
    +                src: ['**/*.js'],
    +                dest: 'dist/',
    +            }],
    +        }
    +    }
    +});
    +
    +

    这是个简单又给力的配置,我们也几乎完成了。 +当你指定好源文件和输出文件后,这个任务就可以来运行了。 +'common'选项的目的在于告诉6to5我们将输出ES5CommonJS模块化风格。 +当然,6to5也支持AMD,我写了sample/index.html,让他在浏览器环境下测试一下,这个HTML的代码如下:

    +
    <!doctype html>
    +<html lang="en">
    +<head>
    +    <meta charset="UTF-8">
    +    <title>ES6 modules 6to5</title>
    +</head>
    +<body>
    +    <script src="//[cdnjs URL]/require.min.js"></script>
    +    <script>
    +        require(['app.js']);
    +    </script>
    +</body>
    +</html>
    +
    +

    观察上面的代码,我们使用AMD的RequireJS框架来加载这个JS,对于这个例子,你需要将上面的配置文件改为 modules: 'amd'

    +

    运行

    +

    万事俱备东风只欠,我们的代码已经放在es6-modules-today-with-6to5,你可以克隆下来自己玩玩。使用npm install安装6to5

    +

    记住一点,Grunt任务会生成一个目标文件夹来存放转化后的代码 +所以,如果你想测试使用CommonJS规范的转化后的ES6的代码,你可以执行一下命令

    +
    node dist/app.js
    +
    +
    + + home + +
    Node.js上的运行效果
    +
    + +

    如果你使用AMD规范的,请在浏览器访问index.html(吐槽一下,老外竟然不知道中国的sea.js)

    +
    + + home + +
    在浏览器执行的效果
    +
    + +

    结论

    +

    通过这个简单的实例你学会了如果简单的使用ES6模块化风格来编写代码。6to5是胃肠棒的工具让你穿越到未来提前体验ES6模块化带来的快感。资源下载es6-modules-today-with-6to5,欢迎提交一些问题的反馈

    +]]> + Wed, 05 Nov 2014 13:21:05 GMT + http://es6rocks.com/cn/2014/11/6to5-es6 + + + + diff --git a/harmonic.js b/harmonic.js index b3b8b48..1a852a7 100644 --- a/harmonic.js +++ b/harmonic.js @@ -1353,13 +1353,28 @@ var Harmonic = function Harmonic(name) { "index_posts": 10, "i18n": { "default": "en", - "languages": ["en", "pt-br"] + "languages": ["en", "pt-br", "cn"] } }; }, getPosts: function() { return { "en": [{ + "layout": "post", + "title": "使用6to5,让今天就来写ES6的模块化开发!", + "date": "2014-11-05T13:21:05.456Z", + "comments": "true", + "published": "true", + "keywords": "", + "description": "", + "categories": [""], + "content": "

    使用6to5,让今天就来写ES6的模块化开发!

    \n", + "file": "./src/posts/6to5-es6.md", + "filename": "6to5-es6", + "link": "2014/11/6to5-es6", + "lang": "en", + "default_lang": false + }, { "layout": "post", "title": "ES6 modules today with 6to5", "date": "2014-10-28T12:49:54.528Z", @@ -1560,6 +1575,21 @@ var Harmonic = function Harmonic(name) { "default_lang": false }], "pt-br": [{ + "layout": "post", + "title": "使用6to5,让今天就来写ES6的模块化开发!", + "date": "2014-11-05T13:21:05.456Z", + "comments": "true", + "published": "true", + "keywords": "", + "description": "", + "categories": [""], + "content": "

    使用6to5,让今天就来写ES6的模块化开发!

    \n", + "file": "./src/posts/6to5-es6.md", + "filename": "6to5-es6", + "link": "pt-br/2014/11/6to5-es6", + "lang": "pt-br", + "default_lang": true + }, { "layout": "post", "title": "Módulos ES6 hoje com o 6to5", "date": "2014-10-28T12:49:54.528Z", @@ -1754,6 +1784,22 @@ var Harmonic = function Harmonic(name) { "link": "pt-br/2014/05/hello-world", "lang": "pt-br", "default_lang": true + }], + "cn": [{ + "layout": "post", + "title": "使用6to5,让今天就来写ES6的模块化开发!", + "date": "2014-11-05T13:21:05.456Z", + "comments": "true", + "published": "true", + "keywords": "", + "description": "", + "categories": [""], + "content": "

    使用6to5,让今天就来写ES6的模块化开发!

    \n

    我之前在Twitter上发过一个照片,表达出我有多快乐,这像是一个时光机让我们可以穿梭到未来-ES6的时代!下面让我来展示如何使用6to5让今天就可以练手ES6的模块化。

    \n
    \n \n \"home\"\n \n
    使用6to5让今天就可以练手ES6的模块化
    \n
    \n\n

    第一步

    \n

    如果你现在还不了解ES6的模块化开发,请在JSModules.io上了解一下。我也推荐大家读一下@jcemer的文章A new syntax for modules in ES6,它涉及到了很多非常酷的关于JS模块化的东西。他可以指导我们使用6to5。总的来说,6to5能在支持ES5d的环境下提前尝试ES6 模块化开发的快感。\n6to5比其他降级工具有一下几个优势:

    \n
      \n
    • 可读性:你的格式化的代码尽可能的保留。
    • \n
    • 可扩展性:有非常庞大的插件库和浏览器的支持。
    • \n
    • 可调式性:因为支持source map,你可以方便的调试已经编译过后的代码
    • \n
    • 高效率:直接转化为与ES相当的代码,不会增加额外的运行十几
    • \n
    \n

    一起来写模块

    \n

    让我们来尝试着写模块吧!\n我们的应用除了输出日志不会做其他事情,其主要的目的就是让你了解模块化如何工作和如何让你现有的环境使用ES6的模块化开发。\n基本的目录结构:

    \n
    ├── Gruntfile.js\n├── package.json\n└── src\n    ├── app.js\n    ├── modules\n    │   ├── bar.js\n    │   ├── baz.js\n    │   └── foo.js\n    └── sample\n        └── index.html\n

    app.js是主程序,包含了我们将要存储的模块化的目录\n下面是app.js的代码:

    \n
    import foo from "./modules/foo";\nimport bar from "./modules/bar";\n\nconsole.log('From module foo >>> ', foo);\nconsole.log('From module bar >>> ', bar);\n
    \n

    以上代码非常简单,我们导入了foo模块和bar模块,然后分别打印出他们

    \n
    // foo.js\nlet foo = 'foo';\n\nexport default foo;\n\n\n// bar.js\nlet bar = 'bar';\n\nexport default bar;\n
    \n

    在这些模块一面我们只是导出了两个字符串'foo'和'bar',当我们导入这些模块,我们的变量其实已经有数据。\n当然,我们何以导出对象,类,函数,等等\n现在,你可以开始模仿这个例子写出你自己的模块

    \n

    构建

    \n

    就像你已经知道的,ES6不支持你现在的浏览器和Node.js,只有一条路,那就是使用降级转换器来编写ES6的模块化代码。\n正如我之前提到的那个,我使用6to5,他可以精确的达到我们想要的效果。\n这个任务是运行在Grunt上的,我们使用 @sindresorhus的 grunt-6to5

    \n
    npm install grunt-cli -g\nnpm install grunt --save-dev\nnpm install grunt-6to5 --save-dev\n
    \n

    我们的Gruntfile类似于一下:

    \n
    grunt.initConfig({\n    '6to5': {\n        options: {\n            modules: 'common'\n        },\n\n        build: {\n            files: [{\n                expand: true,\n                cwd: 'src/',\n                src: ['**/*.js'],\n                dest: 'dist/',\n            }],\n        }\n    }\n});\n
    \n

    这是个简单又给力的配置,我们也几乎完成了。\n当你指定好源文件和输出文件后,这个任务就可以来运行了。\n'common'选项的目的在于告诉6to5我们将输出ES5CommonJS模块化风格。\n当然,6to5也支持AMD,我写了sample/index.html,让他在浏览器环境下测试一下,这个HTML的代码如下:

    \n
    <!doctype html>\n<html lang="en">\n<head>\n    <meta charset="UTF-8">\n    <title>ES6 modules 6to5</title>\n</head>\n<body>\n    <script src="//[cdnjs URL]/require.min.js"></script>\n    <script>\n        require(['app.js']);\n    </script>\n</body>\n</html>\n
    \n

    观察上面的代码,我们使用AMD的RequireJS框架来加载这个JS,对于这个例子,你需要将上面的配置文件改为 modules: 'amd'

    \n

    运行

    \n

    万事俱备东风只欠,我们的代码已经放在es6-modules-today-with-6to5,你可以克隆下来自己玩玩。使用npm install安装6to5

    \n

    记住一点,Grunt任务会生成一个目标文件夹来存放转化后的代码\n所以,如果你想测试使用CommonJS规范的转化后的ES6的代码,你可以执行一下命令

    \n
    node dist/app.js\n
    \n
    \n \n \"home\"\n \n
    Node.js上的运行效果
    \n
    \n\n

    如果你使用AMD规范的,请在浏览器访问index.html(吐槽一下,老外竟然不知道中国的sea.js)

    \n
    \n \n \"home\"\n \n
    在浏览器执行的效果
    \n
    \n\n

    结论

    \n

    通过这个简单的实例你学会了如果简单的使用ES6模块化风格来编写代码。6to5是胃肠棒的工具让你穿越到未来提前体验ES6模块化带来的快感。资源下载es6-modules-today-with-6to5,欢迎提交一些问题的反馈

    \n", + "file": "./src/posts/6to5-es6.md", + "filename": "6to5-es6", + "link": "cn/2014/11/6to5-es6", + "lang": "cn", + "default_lang": true }] }; }, diff --git a/index.html b/index.html index 5144231..070d288 100644 --- a/index.html +++ b/index.html @@ -27,6 +27,12 @@
  • +
  • + + cn + +
  • + @@ -68,7 +74,35 @@

  • + + +
  • + +
  • +
    @@ -180,7 +214,7 @@

    Conclusion

  • @@ -208,7 +242,7 @@

    Conclusion

  • @@ -503,7 +537,7 @@

    Conclusion

  • @@ -534,7 +568,7 @@

    Conclusion

  • @@ -620,7 +654,7 @@

    Conclusion

  • @@ -649,7 +683,7 @@

    Conclusion

  • @@ -678,7 +712,7 @@

    Conclusion

  • @@ -706,7 +740,7 @@

    Conclusion

  • -
  • - - - -
  • - diff --git a/pt-br/2014/05/ecmascript-6-a-better-javascript-for-the-ambient-computing-era/index.html b/pt-br/2014/05/ecmascript-6-a-better-javascript-for-the-ambient-computing-era/index.html index fd50855..01a78c3 100644 --- a/pt-br/2014/05/ecmascript-6-a-better-javascript-for-the-ambient-computing-era/index.html +++ b/pt-br/2014/05/ecmascript-6-a-better-javascript-for-the-ambient-computing-era/index.html @@ -27,6 +27,12 @@
  • +
  • + + cn + +
  • + @@ -83,7 +89,7 @@

    - By Jaydson at + By Jaydson at

    Allen Wirfs-Brock (awbjs no Twitter) é um membro do comitê TC39. Na verdade, ele é o "Project Editor of the ECMAScript Language Specification", ou seja, editor chefe da ECMA.
    diff --git a/pt-br/2014/05/ecmascript-6-the-future-is-here/index.html b/pt-br/2014/05/ecmascript-6-the-future-is-here/index.html index f6f3644..50fb836 100644 --- a/pt-br/2014/05/ecmascript-6-the-future-is-here/index.html +++ b/pt-br/2014/05/ecmascript-6-the-future-is-here/index.html @@ -27,6 +27,12 @@

  • +
  • + + cn + +
  • + @@ -76,7 +82,7 @@

    - By Jaydson at + By Jaydson at

    Uma palestra do Sebastiano Armeli mostrando algumas features da ES6 como scoping, generators, collections, modules and proxies.
    diff --git a/pt-br/2014/05/hello-world/index.html b/pt-br/2014/05/hello-world/index.html index ea3081d..22194b2 100644 --- a/pt-br/2014/05/hello-world/index.html +++ b/pt-br/2014/05/hello-world/index.html @@ -27,6 +27,12 @@

  • +
  • + + cn + +
  • + @@ -83,7 +89,7 @@

    - By Jaydson at + By Jaydson at

    Olá pessoal, bem-vindos ao ES6Rocks! diff --git a/pt-br/2014/05/practical-workflows-es6-modules/index.html b/pt-br/2014/05/practical-workflows-es6-modules/index.html index 2efb188..f7c46ef 100644 --- a/pt-br/2014/05/practical-workflows-es6-modules/index.html +++ b/pt-br/2014/05/practical-workflows-es6-modules/index.html @@ -27,6 +27,12 @@

  • +
  • + + cn + +
  • + @@ -83,7 +89,7 @@

    - By Jaydson at + By Jaydson at

    O Guy Bedford deu um palestra incrível sobre workflows com módulos ES6 no último mês na Fluent Conf. diff --git a/pt-br/2014/07/a-new-syntax-for-modules-in-es6/index.html b/pt-br/2014/07/a-new-syntax-for-modules-in-es6/index.html index 9189aca..4b04df6 100644 --- a/pt-br/2014/07/a-new-syntax-for-modules-in-es6/index.html +++ b/pt-br/2014/07/a-new-syntax-for-modules-in-es6/index.html @@ -27,6 +27,12 @@

  • +
  • + + cn + +
  • + @@ -76,7 +82,7 @@

    - By Jean Carlo Emer at + By Jean Carlo Emer at

    O grupo TC39 - ECMAScript já está finalizando a sexta versão da especificação do ECMAScript. A agenda do grupo aponta o mês de junho do próximo ano como sendo a data de lançamento. A partir de agora, poucas mudanças significativas devem surgir. Já é tempo de se aprofundar no estudo.

    diff --git a/pt-br/2014/07/es6-interview-with-david-herman/index.html b/pt-br/2014/07/es6-interview-with-david-herman/index.html index 306df1d..642d406 100644 --- a/pt-br/2014/07/es6-interview-with-david-herman/index.html +++ b/pt-br/2014/07/es6-interview-with-david-herman/index.html @@ -27,6 +27,12 @@

  • +
  • + + cn + +
  • + @@ -83,7 +89,7 @@

    - By at + By at

    Fizemos uma entrevista bem legal com o David Herman sobre ES6.
    Para quem não conhece, o David é o principal pesquisador e fundador da Mozilla Research, onde ele trabalha para expandir as fundações da Open Web. Ele está envolvido com diversos projetos de plataformas Web, incluindo task.js, sweet.js, asm.js, Rust, Servo e Parallel JS.
    diff --git a/pt-br/2014/08/what-is-next-for-javascript/index.html b/pt-br/2014/08/what-is-next-for-javascript/index.html index a02f30a..79e179d 100644 --- a/pt-br/2014/08/what-is-next-for-javascript/index.html +++ b/pt-br/2014/08/what-is-next-for-javascript/index.html @@ -27,6 +27,12 @@

  • +
  • + + cn + +
  • + @@ -83,7 +89,7 @@

    - By at + By at

    Se você está interessado em ES6, você deve seguir o Dr. Axel Rauschmayer.
    Ele mantêm o incrível blog 2ality e escreve uma série de coisas legais sobre ES6.
    Nessa sua talk ele fala sobre várias novas features da ES6 e mostra o que podemos esperar do futuro.

    diff --git a/pt-br/2014/08/what-you-need-to-know-about-block-scope-let/index.html b/pt-br/2014/08/what-you-need-to-know-about-block-scope-let/index.html index 4b43539..0b8e251 100644 --- a/pt-br/2014/08/what-you-need-to-know-about-block-scope-let/index.html +++ b/pt-br/2014/08/what-you-need-to-know-about-block-scope-let/index.html @@ -27,6 +27,12 @@

  • +
  • + + cn + +
  • + @@ -90,7 +96,7 @@

    - By Jaydson at + By Jaydson at

    Declaração de variáveis em qualquer linguagem de programação é algo básico.
    Independente da linguagem, entender o funcionamento do escopo de variáveis é imprescindível para escrever qualquer programa.
    Em Python, por exemplo, assim como na maioria das linguagens, existem 2 escopos: Local e Global.
    Variáveis definidas na raíz do arquivo, sem identação são variáveis de escopo Global.
    Variáveis que são declaradas dentro do corpo de uma função são consideradas de escopo local.
    Até aqui, tudo é muito parecido. No JavaScript o comportamente é bem semelhante.
    Vejamos um exemplo nas 2 linguagens:

    diff --git a/pt-br/2014/10/arrow-functions-and-their-scope/index.html b/pt-br/2014/10/arrow-functions-and-their-scope/index.html index b755aed..680ce72 100644 --- a/pt-br/2014/10/arrow-functions-and-their-scope/index.html +++ b/pt-br/2014/10/arrow-functions-and-their-scope/index.html @@ -27,6 +27,12 @@

  • +
  • + + cn + +
  • + @@ -90,7 +96,7 @@

    - By Felipe N. Moura at + By Felipe N. Moura at

    Arrow Functions e seu escopo

    diff --git a/pt-br/2014/10/es6-modules-today-with-6to5/index.html b/pt-br/2014/10/es6-modules-today-with-6to5/index.html index 4c592f2..4b87ec9 100644 --- a/pt-br/2014/10/es6-modules-today-with-6to5/index.html +++ b/pt-br/2014/10/es6-modules-today-with-6to5/index.html @@ -27,6 +27,12 @@

  • +
  • + + cn + +
  • + @@ -83,7 +89,7 @@

    - By Jaydson Gomes at + By Jaydson Gomes at

    Eu postei a imagem abaixo no Twitter, mostrando o quanto feliz eu etava.
    É muito legal o que os transpilers podem fazer. No mundo do JavaScript é como uma máquina do tempo, onde podemos avançar para um futuro próximo de coisas muito legais que a ES6 irá nos trazer.
    Nesse tutorial nós vamos mostrar como começar a escrever ES6 modules hoje, usando o excelente 6to5;

    diff --git a/pt-br/2014/10/javascript-unicode/index.html b/pt-br/2014/10/javascript-unicode/index.html index e6b39bd..a508a3b 100644 --- a/pt-br/2014/10/javascript-unicode/index.html +++ b/pt-br/2014/10/javascript-unicode/index.html @@ -27,6 +27,12 @@

  • +
  • + + cn + +
  • + @@ -83,7 +89,7 @@

    - By at + By at

    O Mathias Bynens deu uma palestra incrível na última edição da JSConfEU.
    Ele falou sobre Unicode no JavaScript, e se você precisa trabalhar pesado com strings, você DEVE assistir esta palestra.
    Na verdade, mesmo se você não pega tão pesado com strings no JavaScript, esses truques apresentados pelo Mathias são bem úteis.

    diff --git a/pt-br/2014/11/6to5-es6/index.html b/pt-br/2014/11/6to5-es6/index.html new file mode 100644 index 0000000..d7fffd3 --- /dev/null +++ b/pt-br/2014/11/6to5-es6/index.html @@ -0,0 +1,135 @@ + + + + + 使用6to5,让今天就来写ES6的模块化开发! - ES6 Rocks + + + + + + + + + + + +
    +

    + + + + +

    +

    + 使用6to5,让今天就来写ES6的模块化开发! +

    +
    + + +
    + By at +
    +
    +

    使用6to5,让今天就来写ES6的模块化开发!

    + +
    + +
    +
    + + + comments powered by Disqus +
    + + + + + + + + + + + + \ No newline at end of file diff --git a/pt-br/index.html b/pt-br/index.html index 6025bd0..4d7f066 100644 --- a/pt-br/index.html +++ b/pt-br/index.html @@ -27,6 +27,12 @@

  • +
  • + + cn + +
  • + @@ -68,7 +74,35 @@

  • + + +
  • + +
  • +
    @@ -179,7 +213,7 @@

    Conclusão

  • @@ -207,7 +241,7 @@

    Conclusão

  • @@ -499,7 +533,7 @@

    Conclusão

  • @@ -530,7 +564,7 @@

    Conclusão

  • @@ -619,7 +653,7 @@

    Outras referências

  • @@ -648,7 +682,7 @@

    Outras referências

  • @@ -676,7 +710,7 @@

    Outras referências

  • @@ -705,7 +739,7 @@

    Outras referências

  • -
  • - - - -
  • - diff --git a/pt-br/rss.xml b/pt-br/rss.xml index 7bcb5de..a229c61 100644 --- a/pt-br/rss.xml +++ b/pt-br/rss.xml @@ -6,10 +6,19 @@ A website dedicated to teach all about ES6 ES6 Rocks ES6 Rocks - Wed, 29 Oct 2014 09:08:24 GMT + Wed, 05 Nov 2014 13:23:27 GMT pt-br + + 使用6to5,让今天就来写ES6的模块化开发! + http://es6rocks.com/pt-br/2014/11/6to5-es6 + 使用6to5,让今天就来写ES6的模块化开发!
  • +]]> + Wed, 05 Nov 2014 13:21:05 GMT + http://es6rocks.com/pt-br/2014/11/6to5-es6 + + Módulos ES6 hoje com o 6to5 http://es6rocks.com/pt-br/2014/10/es6-modules-today-with-6to5 @@ -504,14 +513,5 @@ Ele também escreveu um artigo sonre isso. Se você está interessado neste assu http://es6rocks.com/pt-br/2014/05/ecmascript-6-a-better-javascript-for-the-ambient-computing-era - - ECMAScript 6 - O futuro está aqui - http://es6rocks.com/pt-br/2014/05/ecmascript-6-the-future-is-here - Uma palestra do Sebastiano Armeli mostrando algumas features da ES6 como scoping, generators, collections, modules and proxies.

    -]]>
    - Tue, 27 May 2014 05:18:47 GMT - http://es6rocks.com/pt-br/2014/05/ecmascript-6-the-future-is-here -
    - diff --git a/rss.xml b/rss.xml index f0ff300..5ea17d0 100644 --- a/rss.xml +++ b/rss.xml @@ -6,10 +6,19 @@ A website dedicated to teach all about ES6 ES6 Rocks ES6 Rocks - Wed, 29 Oct 2014 09:08:24 GMT + Wed, 05 Nov 2014 13:23:27 GMT en + + 使用6to5,让今天就来写ES6的模块化开发! + http://es6rocks.com/2014/11/6to5-es6 + 使用6to5,让今天就来写ES6的模块化开发!

    +]]> + Wed, 05 Nov 2014 13:21:05 GMT + http://es6rocks.com/2014/11/6to5-es6 + + ES6 modules today with 6to5 http://es6rocks.com/2014/10/es6-modules-today-with-6to5 @@ -505,14 +514,5 @@ David is the principal researcher and founder of Mozilla Research, where he work http://es6rocks.com/2014/05/ecmascript-6-a-better-javascript-for-the-ambient-computing-era - - ECMAScript 6 - The future is here - http://es6rocks.com/2014/05/ecmascript-6-the-future-is-here - A talk by Sebastiano Armeli showing some of the ES6 features like scoping, generators, collections, modules and proxies.

    -]]>
    - Tue, 27 May 2014 05:18:47 GMT - http://es6rocks.com/2014/05/ecmascript-6-the-future-is-here -
    -