diff --git a/docs/intro.md b/docs/intro.md index 59f4187..db626c6 100644 --- a/docs/intro.md +++ b/docs/intro.md @@ -68,11 +68,9 @@ ES6 从开始制定到最后发布,整整用了 15 年。 2015 年 6 月,ECMAScript 6 正式通过,成为国际标准。从 2000 年算起,这时已经过去了 15 年。 -## 部署进度 +目前,各大浏览器对 ES6 的支持可以查看[kangax.github.io/compat-table/es6/](https://kangax.github.io/compat-table/es6/)。 -各大浏览器的最新版本,对 ES6 的支持可以查看[kangax.github.io/compat-table/es6/](https://kangax.github.io/compat-table/es6/)。随着时间的推移,支持度已经越来越高了,超过 90%的 ES6 语法特性都实现了。 - -Node 是 JavaScript 的服务器运行环境(runtime)。它对 ES6 的支持度更高。除了那些默认打开的功能,还有一些语法功能已经实现了,但是默认没有打开。使用下面的命令,可以查看 Node 已经实现的 ES6 特性。 +Node.js 是 JavaScript 的服务器运行环境(runtime)。它对 ES6 的支持度更高。除了那些默认打开的功能,还有一些语法功能已经实现了,但是默认没有打开。使用下面的命令,可以查看 Node.js 默认没有打开的 ES6 实验性语法。 ```bash // Linux & Mac @@ -82,21 +80,9 @@ $ node --v8-options | grep harmony $ node --v8-options | findstr harmony ``` -我写了一个工具 [ES-Checker](https://github.com/ruanyf/es-checker),用来检查各种运行环境对 ES6 的支持情况。访问[ruanyf.github.io/es-checker](http://ruanyf.github.io/es-checker),可以看到您的浏览器支持 ES6 的程度。运行下面的命令,可以查看你正在使用的 Node 环境对 ES6 的支持程度。 - -```bash -$ npm install -g es-checker -$ es-checker - -========================================= -Passes 24 feature Detections -Your runtime supports 57% of ECMAScript 6 -========================================= -``` - ## Babel 转码器 -[Babel](https://babeljs.io/) 是一个广泛使用的 ES6 转码器,可以将 ES6 代码转为 ES5 代码,从而在现有环境执行。这意味着,你可以用 ES6 的方式编写程序,又不用担心现有环境是否支持。下面是一个例子。 +[Babel](https://babeljs.io/) 是一个广泛使用的 ES6 转码器,可以将 ES6 代码转为 ES5 代码,从而在老版本的浏览器执行。这意味着,你可以用 ES6 的方式编写程序,又不用担心现有环境是否支持。下面是一个例子。 ```javascript // 转码前 @@ -300,7 +286,7 @@ import '@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/runtime-corejs3-definitions.js)文件。 ### 浏览器环境 @@ -317,161 +303,3 @@ Babel 也可以用于浏览器环境,使用[@babel/standalone](https://babeljs Babel 提供一个[REPL 在线编译器](https://babeljs.io/repl/),可以在线将 ES6 代码转为 ES5 代码。转换后的代码,可以直接作为 ES5 代码插入网页运行。 -## Traceur 转码器 - -Google 公司的[Traceur](https://github.com/google/traceur-compiler)转码器,也可以将 ES6 代码转为 ES5 代码。 - -### 直接插入网页 - -Traceur 允许将 ES6 代码直接插入网页。首先,必须在网页头部加载 Traceur 库文件。 - -```html - - - - -``` - -上面代码中,一共有 4 个`script`标签。第一个是加载 Traceur 的库文件,第二个和第三个是将这个库文件用于浏览器环境,第四个则是加载用户脚本,这个脚本里面可以使用 ES6 代码。 - -注意,第四个`script`标签的`type`属性的值是`module`,而不是`text/javascript`。这是 Traceur 编译器识别 ES6 代码的标志,编译器会自动将所有`type=module`的代码编译为 ES5,然后再交给浏览器执行。 - -除了引用外部 ES6 脚本,也可以直接在网页中放置 ES6 代码。 - -```javascript - -``` - -正常情况下,上面代码会在控制台打印出`9`。 - -如果想对 Traceur 的行为有精确控制,可以采用下面参数配置的写法。 - -```javascript - -``` - -上面代码中,首先生成 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 代码插入网页运行。 - -上面的例子转为 ES5 代码运行,就是下面这个样子。 - -```javascript - - - - -``` - -### 命令行转换 - -作为命令行工具使用时,Traceur 是一个 Node 的模块,首先需要用 npm 安装。 - -```bash -$ npm install -g traceur -``` - -安装成功后,就可以在命令行下使用 Traceur 了。 - -Traceur 直接运行 ES6 脚本文件,会在标准输出显示运行结果,以前面的`calc.js`为例。 - -```bash -$ traceur calc.js -Calc constructor -9 -``` - -如果要将 ES6 脚本转为 ES5 保存,要采用下面的写法。 - -```bash -$ traceur --script calc.es6.js --out calc.es5.js -``` - -上面代码的`--script`选项表示指定输入文件,`--out`选项表示指定输出文件。 - -为了防止有些特性编译不成功,最好加上`--experimental`选项。 - -```bash -$ traceur --script calc.es6.js --out calc.es5.js --experimental -``` - -命令行下转换生成的文件,就可以直接放到浏览器中运行。 - -### Node 环境的用法 - -Traceur 的 Node 用法如下(假定已安装`traceur`模块)。 - -```javascript -var traceur = require('traceur'); -var fs = require('fs'); - -// 将 ES6 脚本转为字符串 -var contents = fs.readFileSync('es6-file.js').toString(); - -var result = traceur.compile(contents, { - filename: 'es6-file.js', - sourceMap: true, - // 其他设置 - modules: 'commonjs' -}); - -if (result.error) - throw result.error; - -// result 对象的 js 属性就是转换后的 ES5 代码 -fs.writeFileSync('out.js', result.js); -// sourceMap 属性对应 map 文件 -fs.writeFileSync('out.js.map', result.sourceMap); -```