mirror of
https://github.com/ruanyf/es6tutorial.git
synced 2025-05-24 10:22:23 +00:00
docs: fix #952
This commit is contained in:
ruanyf
parent
b0b10a308e
commit
717f4e4218
180
docs/intro.md
180
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
|
||||
<script src="https://google.github.io/traceur-compiler/bin/traceur.js"></script>
|
||||
<script src="https://google.github.io/traceur-compiler/bin/BrowserSystem.js"></script>
|
||||
<script src="https://google.github.io/traceur-compiler/src/bootstrap.js"></script>
|
||||
<script type="module">
|
||||
import './Greeter.js';
|
||||
</script>
|
||||
```
|
||||
|
||||
上面代码中，一共有 4 个`script`标签。第一个是加载 Traceur 的库文件，第二个和第三个是将这个库文件用于浏览器环境，第四个则是加载用户脚本，这个脚本里面可以使用 ES6 代码。
|
||||
|
||||
注意，第四个`script`标签的`type`属性的值是`module`，而不是`text/javascript`。这是 Traceur 编译器识别 ES6 代码的标志，编译器会自动将所有`type=module`的代码编译为 ES5，然后再交给浏览器执行。
|
||||
|
||||
除了引用外部 ES6 脚本，也可以直接在网页中放置 ES6 代码。
|
||||
|
||||
```javascript
|
||||
<script type="module">
|
||||
class Calc {
|
||||
constructor() {
|
||||
console.log('Calc constructor');
|
||||
}
|
||||
add(a, b) {
|
||||
return a + b;
|
||||
}
|
||||
}
|
||||
|
||||
var c = new Calc();
|
||||
console.log(c.add(4,5));
|
||||
</script>
|
||||
```
|
||||
|
||||
正常情况下，上面代码会在控制台打印出`9`。
|
||||
|
||||
如果想对 Traceur 的行为有精确控制，可以采用下面参数配置的写法。
|
||||
|
||||
```javascript
|
||||
<script>
|
||||
// Create the System object
|
||||
window.System = new traceur.runtime.BrowserTraceurLoader();
|
||||
// Set some experimental options
|
||||
var metadata = {
|
||||
traceurOptions: {
|
||||
experimental: true,
|
||||
properTailCalls: true,
|
||||
symbols: true,
|
||||
arrayComprehension: true,
|
||||
asyncFunctions: true,
|
||||
asyncGenerators: exponentiation,
|
||||
forOn: true,
|
||||
generatorComprehension: true
|
||||
}
|
||||
};
|
||||
// Load your module
|
||||
System.import('./myModule.js', {metadata: metadata}).catch(function(ex) {
|
||||
console.error('Import failed', ex.stack || ex);
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
上面代码中，首先生成 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
|
||||
<script src="https://google.github.io/traceur-compiler/bin/traceur.js"></script>
|
||||
<script src="https://google.github.io/traceur-compiler/bin/BrowserSystem.js"></script>
|
||||
<script src="https://google.github.io/traceur-compiler/src/bootstrap.js"></script>
|
||||
<script>
|
||||
$traceurRuntime.ModuleStore.getAnonymousModule(function() {
|
||||
"use strict";
|
||||
|
||||
var Calc = function Calc() {
|
||||
console.log('Calc constructor');
|
||||
};
|
||||
|
||||
($traceurRuntime.createClass)(Calc, {add: function(a, b) {
|
||||
return a + b;
|
||||
}}, {});
|
||||
|
||||
var c = new Calc();
|
||||
console.log(c.add(4, 5));
|
||||
return {};
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
### 命令行转换
|
||||
|
||||
作为命令行工具使用时，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);
|
||||
```
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user