1
0
mirror of https://github.com/ruanyf/es6tutorial.git synced 2025-05-24 18:32:22 +00:00

docs(intro): edit intro/babel

This commit is contained in:
ruanyf 2017-03-27 07:09:55 +08:00
parent d6ed1de83c
commit 5a34395c74
2 changed files with 58 additions and 120 deletions

View File

@ -50,80 +50,37 @@ ES6 从开始制定到最后发布整整用了15年。
前面提到ECMAScript 1.0是1997年发布的接下来的两年连续发布了 ECMAScript 2.01998年6月和 ECMAScript 3.01999年12月。3.0版是一个巨大的成功,在业界得到广泛支持,成为通行标准,奠定了 JavaScript 语言的基本语法,以后的版本完全继承。直到今天,初学者一开始学习 JavaScript其实就是在学3.0版的语法。 前面提到ECMAScript 1.0是1997年发布的接下来的两年连续发布了 ECMAScript 2.01998年6月和 ECMAScript 3.01999年12月。3.0版是一个巨大的成功,在业界得到广泛支持,成为通行标准,奠定了 JavaScript 语言的基本语法,以后的版本完全继承。直到今天,初学者一开始学习 JavaScript其实就是在学3.0版的语法。
2000年ECMAScript 4.0开始酝酿。这个版本最后没有通过但是它的大部分内容被ES6继承了。因此ES6制定的起点其实是2000年。 2000年ECMAScript 4.0开始酝酿。这个版本最后没有通过,但是它的大部分内容被 ES6 继承了。因此ES6 制定的起点其实是2000年。
为什么ES4没有通过呢因为这个版本太激进了对ES3做了彻底升级导致标准委员会的一些成员不愿意接受。ECMA的第39号技术专家委员会Technical Committee 39简称TC39负责制订ECMAScript标准成员包括Microsoft、Mozilla、Google等大公司。 为什么 ES4 没有通过呢?因为这个版本太激进了,对 ES3 做了彻底升级导致标准委员会的一些成员不愿意接受。ECMA 的第39号技术专家委员会Technical Committee 39简称TC39负责制订 ECMAScript 标准,成员包括 Microsoft、Mozilla、Google 等大公司。
2007年10月ECMAScript 4.0版草案发布本来预计次年8月发布正式版本。但是各方对于是否通过这个标准发生了严重分歧。以Yahoo、Microsoft、Google为首的大公司反对JavaScript的大幅升级主张小幅改动以JavaScript创造者Brendan Eich为首的Mozilla公司则坚持当前的草案。 2007年10月ECMAScript 4.0 版草案发布本来预计次年8月发布正式版本。但是各方对于是否通过这个标准发生了严重分歧。以 Yahoo、Microsoft、Google 为首的大公司,反对 JavaScript 的大幅升级,主张小幅改动;以 JavaScript 创造者Brendan Eich为首的Mozilla公司则坚持当前的草案。
2008年7月由于对于下一个版本应该包括哪些功能各方分歧太大争论过于激烈ECMA开会决定中止ECMAScript 4.0的开发将其中涉及现有功能改善的一小部分发布为ECMAScript 3.1而将其他激进的设想扩大范围放入以后的版本由于会议的气氛该版本的项目代号起名为Harmony和谐。会后不久ECMAScript 3.1就改名为ECMAScript 5。 2008年7月由于对于下一个版本应该包括哪些功能各方分歧太大争论过于激烈ECMA 开会决定,中止 ECMAScript 4.0 的开发,将其中涉及现有功能改善的一小部分,发布为 ECMAScript 3.1,而将其他激进的设想扩大范围,放入以后的版本,由于会议的气氛,该版本的项目代号起名为 Harmony和谐。会后不久ECMAScript 3.1 就改名为 ECMAScript 5。
2009年12月ECMAScript 5.0版正式发布。Harmony项目则一分为二一些较为可行的设想定名为JavaScript.next继续开发后来演变成ECMAScript 6一些不是很成熟的设想则被视为JavaScript.next.next在更远的将来再考虑推出。TC39委员会的总体考虑是ES5与ES3基本保持兼容较大的语法修正和新功能加入将由JavaScript.next完成。当时JavaScript.next指的是ES6第六版发布以后就指ES7。TC39的判断是ES5会在2013年的年中成为JavaScript开发的主流标准并在此后五年中一直保持这个位置。 2009年12月ECMAScript 5.0 版正式发布。Harmony 项目则一分为二,一些较为可行的设想定名为 JavaScript.next 继续开发,后来演变成 ECMAScript 6一些不是很成熟的设想则被视为 JavaScript.next.next在更远的将来再考虑推出。TC39 委员会的总体考虑是ES5 ES3 基本保持兼容,较大的语法修正和新功能加入,将由 JavaScript.next 完成。当时JavaScript.next 指的是ES6第六版发布以后就指 ES7。TC39 的判断是ES5 会在2013年的年中成为 JavaScript 开发的主流标准,并在此后五年中一直保持这个位置。
2011年6月ECMAscript 5.1版发布并且成为ISO国际标准ISO/IEC 16262:2011 2011年6月ECMAscript 5.1 版发布,并且成为 ISO 国际标准ISO/IEC 16262:2011
2013年3月ECMAScript 6草案冻结不再添加新功能。新的功能设想将被放到ECMAScript 7。 2013年3月ECMAScript 6 草案冻结,不再添加新功能。新的功能设想将被放到 ECMAScript 7。
2013年12月ECMAScript 6草案发布。然后是12个月的讨论期听取各方反馈。 2013年12月ECMAScript 6 草案发布。然后是12个月的讨论期听取各方反馈。
2015年6月ECMAScript 6正式通过成为国际标准。从2000年算起这时已经过去了15年。 2015年6月ECMAScript 6 正式通过成为国际标准。从2000年算起这时已经过去了15年。
## 部署进度 ## 部署进度
各大浏览器的最新版本对ES6的支持可以查看[kangax.github.io/es5-compat-table/es6/](http://kangax.github.io/es5-compat-table/es6/)。随着时间的推移,支持度已经越来越高了,ES6的大部分特性都实现了。 各大浏览器的最新版本,对 ES6 的支持可以查看[kangax.github.io/es5-compat-table/es6/](http://kangax.github.io/es5-compat-table/es6/)。随着时间的推移,支持度已经越来越高了,超过90%的 ES6 语法特性都实现了。
Node.js是JavaScript语言的服务器运行环境对ES6的支持度比浏览器更高。通过Node可以体验更多ES6的特性。建议使用版本管理工具[nvm](https://github.com/creationix/nvm)来安装Node因为可以自由切换版本。不过`nvm`不支持Windows系统如果你使用Windows系统下面的操作可以改用[nvmw](https://github.com/hakobera/nvmw)或[nvm-windows](https://github.com/coreybutler/nvm-windows)代替。 Node 是 JavaScript 的服务器运行环境runtime。它对 ES6 的支持更高。除了那些默认打开的功能,还有一些语法功能已经实现了,但是默认没有打开。使用下面的命令,可以查看 Node 那些没有打开的 ES6 特性。
安装nvm需要打开命令行窗口运行下面的命令。
```bash
$ curl -o- https://raw.githubusercontent.com/creationix/nvm/<version number>/install.sh | bash
```
上面命令的`version number`处,需要用版本号替换。本节写作时的版本号是`v0.29.0`。该命令运行后,`nvm`会默认安装在用户主目录的`.nvm`子目录。
然后,激活`nvm`
```bash
$ source ~/.nvm/nvm.sh
```
激活以后安装Node的最新版。
```bash
$ nvm install node
```
安装完成后,切换到该版本。
```bash
$ nvm use node
```
使用下面的命令可以查看Node所有已经实现的ES6特性。
```bash ```bash
$ node --v8-options | grep harmony $ node --v8-options | grep harmony
--harmony_typeof
--harmony_scoping
--harmony_modules
--harmony_symbols
--harmony_proxies
--harmony_collections
--harmony_observation
--harmony_generators
--harmony_iteration
--harmony_numeric_literals
--harmony_strings
--harmony_arrays
--harmony_maths
--harmony
``` ```
上面命令的输出结果,会因为版本的不同而有所不同。 上面命令的输出结果,会因为版本的不同而有所不同。
我写了一个[ES-Checker](https://github.com/ruanyf/es-checker)模块用来检查各种运行环境对ES6的支持情况。访问[ruanyf.github.io/es-checker](http://ruanyf.github.io/es-checker)可以看到您的浏览器支持ES6的程度。运行下面的命令可以查看你正在使用的Node环境对ES6的支持程度。 我写了一个工具 [ES-Checker](https://github.com/ruanyf/es-checker),用来检查各种运行环境对 ES6 的支持情况。访问[ruanyf.github.io/es-checker](http://ruanyf.github.io/es-checker),可以看到您的浏览器支持 ES6 的程度。运行下面的命令,可以查看你正在使用的 Node 环境对 ES6 的支持程度。
```bash ```bash
$ npm install -g es-checker $ npm install -g es-checker
@ -135,9 +92,9 @@ Your runtime supports 57% of ECMAScript 6
========================================= =========================================
``` ```
## Babel转码器 ## Babel 转码器
[Babel](https://babeljs.io/)是一个广泛使用的ES6转码器可以将ES6代码转为ES5代码从而在现有环境执行。这意味着你可以用ES6的方式编写程序又不用担心现有环境是否支持。下面是一个例子。 [Babel](https://babeljs.io/) 是一个广泛使用的 ES6 转码器,可以将 ES6 代码转为 ES5 代码,从而在现有环境执行。这意味着,你可以用 ES6 的方式编写程序,又不用担心现有环境是否支持。下面是一个例子。
```javascript ```javascript
// 转码前 // 转码前
@ -149,11 +106,11 @@ input.map(function (item) {
}); });
``` ```
上面的原始代码用了箭头函数,这个特性还没有得到广泛支持Babel将其转为普通函数就能在现有的JavaScript环境执行了。 上面的原始代码用了箭头函数,Babel 将其转为普通函数,就能在不支持箭头函数的 JavaScript 环境执行了。
### 配置文件`.babelrc` ### 配置文件`.babelrc`
Babel的配置文件是`.babelrc`存放在项目的根目录下。使用Babel的第一步就是配置这个文件。 Babel 的配置文件是`.babelrc`,存放在项目的根目录下。使用 Babel 的第一步,就是配置这个文件。
该文件用来设置转码规则和插件,基本格式如下。 该文件用来设置转码规则和插件,基本格式如下。
@ -167,13 +124,13 @@ Babel的配置文件是`.babelrc`存放在项目的根目录下。使用Babel
`presets`字段设定转码规则,官方提供以下的规则集,你可以根据需要安装。 `presets`字段设定转码规则,官方提供以下的规则集,你可以根据需要安装。
```bash ```bash
# ES2015转码规则 # 最新转码规则
$ npm install --save-dev babel-preset-es2015 $ npm install --save-dev babel-preset-latest
# react转码规则 # react 转码规则
$ npm install --save-dev babel-preset-react $ npm install --save-dev babel-preset-react
# ES7不同阶段语法提案的转码规则共有4个阶段选装一个 # 不同阶段语法提案的转码规则共有4个阶段选装一个
$ npm install --save-dev babel-preset-stage-0 $ npm install --save-dev babel-preset-stage-0
$ npm install --save-dev babel-preset-stage-1 $ npm install --save-dev babel-preset-stage-1
$ npm install --save-dev babel-preset-stage-2 $ npm install --save-dev babel-preset-stage-2
@ -185,7 +142,7 @@ $ npm install --save-dev babel-preset-stage-3
```javascript ```javascript
{ {
"presets": [ "presets": [
"es2015", "latest",
"react", "react",
"stage-2" "stage-2"
], ],
@ -193,7 +150,7 @@ $ npm install --save-dev babel-preset-stage-3
} }
``` ```
注意以下所有Babel工具和模块的使用都必须先写好`.babelrc` 注意,以下所有 Babe l工具和模块的使用都必须先写好`.babelrc`
### 命令行转码`babel-cli` ### 命令行转码`babel-cli`
@ -227,7 +184,7 @@ $ babel src -d lib
$ babel src -d lib -s $ babel src -d lib -s
``` ```
上面代码是在全局环境下进行Babel转码。这意味着如果项目要运行全局环境必须有Babel也就是说项目产生了对环境的依赖。另一方面这样做也无法支持不同项目使用不同版本的Babel。 上面代码是在全局环境下,进行 Babel 转码。这意味着,如果项目要运行,全局环境必须有 Babel也就是说项目产生了对环境的依赖。另一方面这样做也无法支持不同项目使用不同版本的 Babel。
一个解决办法是将`babel-cli`安装在项目之中。 一个解决办法是将`babel-cli`安装在项目之中。
@ -314,7 +271,7 @@ require("./index.js");
### babel-core ### babel-core
如果某些代码需要调用Babel的API进行转码就要使用`babel-core`模块。 如果某些代码需要调用 Babel API 进行转码,就要使用`babel-core`模块。
安装命令如下。 安装命令如下。
@ -353,7 +310,7 @@ babel.transformFromAst(ast, code, options);
var es6Code = 'let x = n => n + 1'; var es6Code = 'let x = n => n + 1';
var es5Code = require('babel-core') var es5Code = require('babel-core')
.transform(es6Code, { .transform(es6Code, {
presets: ['es2015'] presets: ['latest']
}) })
.code; .code;
// '"use strict";\n\nvar x = function x(n) {\n return n + 1;\n};' // '"use strict";\n\nvar x = function x(n) {\n return n + 1;\n};'
@ -363,9 +320,9 @@ var es5Code = require('babel-core')
### babel-polyfill ### babel-polyfill
Babel默认只转换新的JavaScript句法syntax而不转换新的API比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象以及一些定义在全局对象上的方法比如`Object.assign`)都不会转码。 Babel 默认只转换新的 JavaScript 句法syntax而不转换新的 API比如`Iterator``Generator``Set``Maps``Proxy``Reflect``Symbol``Promise`等全局对象,以及一些定义在全局对象上的方法(比如`Object.assign`)都不会转码。
举例来说ES6在`Array`对象上新增了`Array.from`方法。Babel就不会转码这个方法。如果想让这个方法运行必须使用`babel-polyfill`,为当前环境提供一个垫片。 举例来说ES6在`Array`对象上新增了`Array.from`方法。Babel 就不会转码这个方法。如果想让这个方法运行,必须使用`babel-polyfill`,为当前环境提供一个垫片。
安装命令如下。 安装命令如下。
@ -381,30 +338,11 @@ import 'babel-polyfill';
require('babel-polyfill'); require('babel-polyfill');
``` ```
Babel默认不转码的API非常多详细清单可以查看`babel-plugin-transform-runtime`模块的[definitions.js](https://github.com/babel/babel/blob/master/packages/babel-plugin-transform-runtime/src/definitions.js)文件。 Babel 默认不转码的 API 非常多,详细清单可以查看`babel-plugin-transform-runtime`模块的[definitions.js](https://github.com/babel/babel/blob/master/packages/babel-plugin-transform-runtime/src/definitions.js)文件。
### 浏览器环境 ### 浏览器环境
Babel也可以用于浏览器环境。但是从Babel 6.0开始不再直接提供浏览器版本而是要用构建工具构建出来。如果你没有或不想使用构建工具可以通过安装5.x版本的`babel-core`模块获取。 Babel 也可以用于浏览器环境。但是,从 Babel 6.0 开始,不再直接提供浏览器版本,而是要用构建工具构建出来。如果你没有或不想使用构建工具,可以使用[babel-standalone](https://github.com/Daniel15/babel-standalone)模块提供的浏览器版本,将其插入网页。
```bash
$ npm install babel-core@5
```
运行上面的命令以后,就可以在当前目录的`node_modules/babel-core/`子目录里面,找到`babel`的浏览器版本`browser.js`(未精简)和`browser.min.js`(已精简)。
然后,将下面的代码插入网页。
```html
<script src="node_modules/babel-core/browser.js"></script>
<script type="text/babel">
// Your ES6 code
</script>
```
上面代码中,`browser.js`是Babel提供的转换器脚本可以在浏览器运行。用户的ES6脚本放在`script`标签之中,但是要注明`type="text/babel"`
另一种方法是使用[babel-standalone](https://github.com/Daniel15/babel-standalone)模块提供的浏览器版本,将其插入网页。
```html ```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.4.4/babel.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.4.4/babel.min.js"></script>
@ -413,19 +351,19 @@ $ npm install babel-core@5
</script> </script>
``` ```
注意,网页实时将ES6代码转为ES5对性能会有影响。生产环境需要加载已经转码完成的脚本。 注意,网页实时将 ES6 代码转为 ES5对性能会有影响。生产环境需要加载已经转码完成的脚本。
下面是如何将代码打包成浏览器可以使用的脚本,以`Babel`配合`Browserify`为例。首先,安装`babelify`模块。 下面是如何将代码打包成浏览器可以使用的脚本,以`Babel`配合`Browserify`为例。首先,安装`babelify`模块。
```bash ```bash
$ npm install --save-dev babelify babel-preset-es2015 $ npm install --save-dev babelify babel-preset-latest
``` ```
然后再用命令行转换ES6脚本。 然后,再用命令行转换 ES6 脚本。
```bash ```bash
$ browserify script.js -o bundle.js \ $ browserify script.js -o bundle.js \
-t [ babelify --presets [ es2015 ] ] -t [ babelify --presets [ latest ] ]
``` ```
上面代码将ES6脚本`script.js`,转为`bundle.js`,浏览器直接加载后者就可以了。 上面代码将ES6脚本`script.js`,转为`bundle.js`,浏览器直接加载后者就可以了。
@ -435,20 +373,20 @@ $ browserify script.js -o bundle.js \
```javascript ```javascript
{ {
"browserify": { "browserify": {
"transform": [["babelify", { "presets": ["es2015"] }]] "transform": [["babelify", { "presets": ["latest"] }]]
} }
} }
``` ```
### 在线转换 ### 在线转换
Babel提供一个[REPL在线编译器](https://babeljs.io/repl/)可以在线将ES6代码转为ES5代码。转换后的代码可以直接作为ES5代码插入网页运行。 Babel 提供一个[REPL在线编译器](https://babeljs.io/repl/),可以在线将 ES6 代码转为 ES5 代码。转换后的代码,可以直接作为 ES5 代码插入网页运行。
### 与其他工具的配合 ### 与其他工具的配合
许多工具需要Babel进行前置转码这里举两个例子ESLint和Mocha。 许多工具需要 Babel 进行前置转码这里举两个例子ESLint Mocha。
ESLint用于静态检查代码的语法和风格安装命令如下。 ESLint 用于静态检查代码的语法和风格,安装命令如下。
```bash ```bash
$ npm install --save-dev eslint babel-eslint $ npm install --save-dev eslint babel-eslint
@ -480,7 +418,7 @@ $ npm install --save-dev eslint babel-eslint
} }
``` ```
Mocha则是一个测试框架如果需要执行使用ES6语法的测试脚本可以修改`package.json``scripts.test` Mocha 则是一个测试框架,如果需要执行使用 ES6 语法的测试脚本,可以修改`package.json``scripts.test`
```javascript ```javascript
"scripts": { "scripts": {
@ -490,13 +428,13 @@ Mocha则是一个测试框架如果需要执行使用ES6语法的测试脚本
上面命令中,`--compilers`参数指定脚本的转码器,规定后缀名为`js`的文件,都需要使用`babel-core/register`先转码。 上面命令中,`--compilers`参数指定脚本的转码器,规定后缀名为`js`的文件,都需要使用`babel-core/register`先转码。
## Traceur转码器 ## Traceur 转码器
Google公司的[Traceur](https://github.com/google/traceur-compiler)转码器也可以将ES6代码转为ES5代码。 Google公司的[Traceur](https://github.com/google/traceur-compiler)转码器,也可以将 ES6 代码转为 ES5 代码。
### 直接插入网页 ### 直接插入网页
Traceur允许将ES6代码直接插入网页。首先必须在网页头部加载Traceur库文件。 Traceur 允许将 ES6 代码直接插入网页。首先,必须在网页头部加载 Traceur 库文件。
```html ```html
<script src="https://google.github.io/traceur-compiler/bin/traceur.js"></script> <script src="https://google.github.io/traceur-compiler/bin/traceur.js"></script>
@ -507,19 +445,19 @@ Traceur允许将ES6代码直接插入网页。首先必须在网页头部加
</script> </script>
``` ```
上面代码中一共有4个`script`标签。第一个是加载Traceur的库文件第二个和第三个是将这个库文件用于浏览器环境第四个则是加载用户脚本这个脚本里面可以使用ES6代码。 上面代码中一共有4个`script`标签。第一个是加载 Traceur 的库文件第二个和第三个是将这个库文件用于浏览器环境第四个则是加载用户脚本这个脚本里面可以使用ES6代码。
注意,第四个`script`标签的`type`属性的值是`module`,而不是`text/javascript`。这是Traceur编译器识别ES6代码的标志编译器会自动将所有`type=module`的代码编译为ES5然后再交给浏览器执行。 注意,第四个`script`标签的`type`属性的值是`module`,而不是`text/javascript`。这是 Traceur 编译器识别 ES6 代码的标志,编译器会自动将所有`type=module`的代码编译为 ES5然后再交给浏览器执行。
除了引用外部ES6脚本也可以直接在网页中放置ES6代码。 除了引用外部 ES6 脚本,也可以直接在网页中放置 ES6 代码。
```javascript ```javascript
<script type="module"> <script type="module">
class Calc { class Calc {
constructor(){ constructor() {
console.log('Calc constructor'); console.log('Calc constructor');
} }
add(a, b){ add(a, b) {
return a + b; return a + b;
} }
} }
@ -529,9 +467,9 @@ Traceur允许将ES6代码直接插入网页。首先必须在网页头部加
</script> </script>
``` ```
正常情况下上面代码会在控制台打印出9。 正常情况下,上面代码会在控制台打印出`9`
如果想对Traceur的行为有精确控制可以采用下面参数配置的写法。 如果想对 Traceur 的行为有精确控制,可以采用下面参数配置的写法。
```javascript ```javascript
<script> <script>
@ -557,13 +495,13 @@ Traceur允许将ES6代码直接插入网页。首先必须在网页头部加
</script> </script>
``` ```
上面代码中首先生成Traceur的全局对象`window.System`,然后`System.import`方法可以用来加载ES6模块。加载的时候,需要传入一个配置对象`metadata`,该对象的`traceurOptions`属性可以配置支持ES6功能。如果设为`experimental: true`就表示除了ES6以外还支持一些实验性的新功能。 上面代码中首先生成Traceur的全局对象`window.System`,然后`System.import`方法可以用来加载 ES6。加载的时候需要传入一个配置对象`metadata`,该对象的`traceurOptions`属性可以配置支持 ES6 功能。如果设为`experimental: true`,就表示除了 ES6 以外,还支持一些实验性的新功能。
### 在线转换 ### 在线转换
Traceur也提供一个[在线编译器](http://google.github.io/traceur-compiler/demo/repl.html)可以在线将ES6代码转为ES5代码。转换后的代码可以直接作为ES5代码插入网页运行。 Traceur也提供一个[在线编译器](http://google.github.io/traceur-compiler/demo/repl.html),可以在线将 ES6 代码转为 ES5 代码。转换后的代码,可以直接作为 ES5 代码插入网页运行。
上面的例子转为ES5代码运行就是下面这个样子。 上面的例子转为 ES5 代码运行,就是下面这个样子。
```javascript ```javascript
<script src="https://google.github.io/traceur-compiler/bin/traceur.js"></script> <script src="https://google.github.io/traceur-compiler/bin/traceur.js"></script>
@ -590,15 +528,15 @@ $traceurRuntime.ModuleStore.getAnonymousModule(function() {
### 命令行转换 ### 命令行转换
作为命令行工具使用时Traceur是一个Node的模块首先需要用Npm安装。 作为命令行工具使用时Traceur 是一个 Node 的模块,首先需要用 Npm 安装。
```bash ```bash
$ npm install -g traceur $ npm install -g traceur
``` ```
安装成功后就可以在命令行下使用Traceur了。 安装成功后,就可以在命令行下使用 Traceur 了。
Traceur直接运行es6脚本文件,会在标准输出显示运行结果,以前面的`calc.js`为例。 Traceur 直接运行 ES6 脚本文件,会在标准输出显示运行结果,以前面的`calc.js`为例。
```bash ```bash
$ traceur calc.js $ traceur calc.js
@ -606,7 +544,7 @@ Calc constructor
9 9
``` ```
如果要将ES6脚本转为ES5保存要采用下面的写法。 如果要将 ES6 脚本转为 ES5 保存,要采用下面的写法。
```bash ```bash
$ traceur --script calc.es6.js --out calc.es5.js $ traceur --script calc.es6.js --out calc.es5.js
@ -622,9 +560,9 @@ $ traceur --script calc.es6.js --out calc.es5.js --experimental
命令行下转换生成的文件,就可以直接放到浏览器中运行。 命令行下转换生成的文件,就可以直接放到浏览器中运行。
### Node.js环境的用法 ### Node 环境的用法
Traceur的Node.js用法如下假定已安装traceur模块 Traceur Node用法如下假定已安装`traceur`模块)。
```javascript ```javascript
var traceur = require('traceur'); var traceur = require('traceur');

View File

@ -10,7 +10,7 @@ Promise 是异步编程的一种解决方案,比传统的解决方案——回
1对象的状态不受外界影响。`Promise`对象代表一个异步操作,有三种状态:`Pending`(进行中)、`Resolved`(已完成,又称 Fulfilled`Rejected`(已失败)。只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。这也是`Promise`这个名字的由来,它的英语意思就是“承诺”,表示其他手段无法改变。 1对象的状态不受外界影响。`Promise`对象代表一个异步操作,有三种状态:`Pending`(进行中)、`Resolved`(已完成,又称 Fulfilled`Rejected`(已失败)。只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。这也是`Promise`这个名字的由来,它的英语意思就是“承诺”,表示其他手段无法改变。
2一旦状态改变就不会再变任何时候都可以得到这个结果。`Promise`对象的状态改变,只有两种可能:从`Pending`变为`Resolved`和从`Pending`变为`Rejected`。只要这两种情况发生,状态就凝固了,不会再变了,会一直保持这个结果。如果改变已经发生了,就算你再对`Promise`对象添加回调函数也会立即得到这个结果。这与事件Event完全不同事件的特点是如果你错过了它再去监听是得不到结果的。 2一旦状态改变就不会再变任何时候都可以得到这个结果。`Promise`对象的状态改变,只有两种可能:从`Pending`变为`Resolved`和从`Pending`变为`Rejected`。只要这两种情况发生,状态就凝固了,不会再变了,会一直保持这个结果。如果改变已经发生了,你再对`Promise`对象添加回调函数也会立即得到这个结果。这与事件Event完全不同事件的特点是如果你错过了它再去监听是得不到结果的。
有了`Promise`对象,就可以将异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数。此外,`Promise`对象提供统一的接口,使得控制异步操作更加容易。 有了`Promise`对象,就可以将异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数。此外,`Promise`对象提供统一的接口,使得控制异步操作更加容易。