docs(intro): update babel

Author: ruanyf

docs/intro.md

@@ -110,6 +110,12 @@ input.map(function (item) {
 
 上面的原始代码用了箭头函数，Babel 将其转为普通函数，就能在不支持箭头函数的 JavaScript 环境执行了。
 
+下面的命令在项目目录中，安装 Babel。
+
+```bash
+$ npm install --save-dev @babel/core
+```
+
 ### 配置文件`.babelrc`
 
 Babel 的配置文件是`.babelrc`，存放在项目的根目录下。使用 Babel 的第一步，就是配置这个文件。
@@ -127,164 +133,116 @@ Babel 的配置文件是`.babelrc`，存放在项目的根目录下。使用 Bab
 
 ```bash
 # 最新转码规则
-$ npm install --save-dev babel-preset-latest
+$ npm install --save-dev @babel/preset-env
 
 # react 转码规则
-$ npm install --save-dev babel-preset-react
-
-# 不同阶段语法提案的转码规则（共有4个阶段），选装一个
-$ npm install --save-dev babel-preset-stage-0
-$ npm install --save-dev babel-preset-stage-1
-$ npm install --save-dev babel-preset-stage-2
-$ npm install --save-dev babel-preset-stage-3
+$ npm install --save-dev @babel/preset-react
 ```
 
 然后，将这些规则加入`.babelrc`。
 
 ```javascript
   {
     "presets": [
-      "latest",
-      "react",
-      "stage-2"
+      "@babel/env",
+      "@babel/preset-react"
     ],
     "plugins": []
   }
 ```
 
 注意，以下所有 Babel 工具和模块的使用，都必须先写好`.babelrc`。
 
-### 命令行转码`babel-cli`
+### 命令行转码
 
-Babel 提供`babel-cli`工具，用于命令行转码。
+Babel 提供命令行工具`@babel/cli`，用于命令行转码。
 
 它的安装命令如下。
 
 ```bash
-$ npm install --global babel-cli
+$ npm install --save-dev @babel/cli
 ```
 
 基本用法如下。
 
 ```bash
 # 转码结果输出到标准输出
-$ babel example.js
+$ npx babel example.js
 
 # 转码结果写入一个文件
 # --out-file 或 -o 参数指定输出文件
-$ babel example.js --out-file compiled.js
+$ npx babel example.js --out-file compiled.js
 # 或者
-$ babel example.js -o compiled.js
+$ npx babel example.js -o compiled.js
 
 # 整个目录转码
 # --out-dir 或 -d 参数指定输出目录
-$ babel src --out-dir lib
+$ npx babel src --out-dir lib
 # 或者
-$ babel src -d lib
+$ npx babel src -d lib
 
 # -s 参数生成source map文件
-$ babel src -d lib -s
+$ npx babel src -d lib -s
 ```
 
-上面代码是在全局环境下，进行 Babel 转码。这意味着，如果项目要运行，全局环境必须有 Babel，也就是说项目产生了对环境的依赖。另一方面，这样做也无法支持不同项目使用不同版本的 Babel。
-
-一个解决办法是将`babel-cli`安装在项目之中。
-
-```bash
-# 安装
-$ npm install --save-dev babel-cli
-```
-
-然后，改写`package.json`。
+### babel-node
 
-```javascript
-{
-  // ...
-  "devDependencies": {
-    "babel-cli": "^6.0.0"
-  },
-  "scripts": {
-    "build": "babel src -d lib"
-  },
-}
-```
+`@babel/node`模块的`babel-node`命令，提供一个支持 ES6 的 REPL 环境。它支持 Node 的 REPL 环境的所有功能，而且可以直接运行 ES6 代码。
 
-转码的时候，就执行下面的命令。
+首先，安装这个模块。
 
-```javascript
-$ npm run build
+```bash
+$ npm install --save-dev @babel/node
 ```
 
-### babel-node
-
-`babel-cli`工具自带一个`babel-node`命令，提供一个支持 ES6 的 REPL 环境。它支持 Node 的 REPL 环境的所有功能，而且可以直接运行 ES6 代码。
-
-它不用单独安装，而是随`babel-cli`一起安装。然后，执行`babel-node`就进入 REPL 环境。
+然后，执行`babel-node`就进入 REPL 环境。
 
 ```bash
-$ babel-node
+$ npx babel-node
 > (x => x * 2)(1)
 2
 ```
 
 `babel-node`命令可以直接运行 ES6 脚本。将上面的代码放入脚本文件`es6.js`，然后直接运行。
 
 ```bash
-$ babel-node es6.js
+# es6.js 的代码
+# console.log((x => x * 2)(1));
+$ npx babel-node es6.js
 2
 ```
 
-`babel-node`也可以安装在项目中。
+### @babel/register 模块
 
-```bash
-$ npm install --save-dev babel-cli
-```
-
-然后，改写`package.json`。
-
-```javascript
-{
-  "scripts": {
-    "script-name": "babel-node script.js"
-  }
-}
-```
-
-上面代码中，使用`babel-node`替代`node`，这样`script.js`本身就不用做任何转码处理。
-
-### babel-register
-
-`babel-register`模块改写`require`命令，为它加上一个钩子。此后，每当使用`require`加载`.js`、`.jsx`、`.es`和`.es6`后缀名的文件，就会先用 Babel 进行转码。
+`@babel/register`模块改写`require`命令，为它加上一个钩子。此后，每当使用`require`加载`.js`、`.jsx`、`.es`和`.es6`后缀名的文件，就会先用 Babel 进行转码。
 
 ```bash
-$ npm install --save-dev babel-register
+$ npm install --save-dev @babel/register
 ```
 
-使用时，必须首先加载`babel-register`。
+使用时，必须首先加载`@babel/register`。
 
 ```bash
-require("babel-register");
-require("./index.js");
+// index.js
+require('@babel/register');
+require('./es6.js');
 ```
 
 然后，就不需要手动对`index.js`转码了。
 
-需要注意的是，`babel-register`只会对`require`命令加载的文件转码，而不会对当前文件转码。另外，由于它是实时转码，所以只适合在开发环境使用。
-
-### babel-core
-
-如果某些代码需要调用 Babel 的 API 进行转码，就要使用`babel-core`模块。
-
-安装命令如下。
-
 ```bash
-$ npm install babel-core --save
+$ node index.js
+2
 ```
 
-然后，在项目中就可以调用`babel-core`。
+需要注意的是，`@babel/register`只会对`require`命令加载的文件转码，而不会对当前文件转码。另外，由于它是实时转码，所以只适合在开发环境使用。
+
+### babel API
+
+如果某些代码需要调用 Babel 的 API 进行转码，就要使用`@babel/core`模块。
 
 ```javascript
-var babel = require('babel-core');
+var babel = require('@babel/core');
 
 // 字符串转码
 babel.transform('code();', options);
@@ -310,17 +268,19 @@ babel.transformFromAst(ast, code, options);
 
 ```javascript
 var es6Code = 'let x = n => n + 1';
-var es5Code = require('babel-core')
+var es5Code = require('@babel/core')
   .transform(es6Code, {
-    presets: ['latest']
+    presets: ['@babel/env']
   })
   .code;
+
+console.log(es5Code);
 // '"use strict";\n\nvar x = function x(n) {\n  return n + 1;\n};'
 ```
 
 上面代码中，`transform`方法的第一个参数是一个字符串，表示需要被转换的 ES6 代码，第二个参数是转换的配置对象。
 
-### babel-polyfill
+### @babel/polyfill
 
 Babel 默认只转换新的 JavaScript 句法（syntax），而不转换新的 API，比如`Iterator`、`Generator`、`Set`、`Map`、`Proxy`、`Reflect`、`Symbol`、`Promise`等全局对象，以及一些定义在全局对象上的方法（比如`Object.assign`）都不会转码。
 
@@ -329,107 +289,34 @@ Babel 默认只转换新的 JavaScript 句法（syntax），而不转换新的 A
 安装命令如下。
 
 ```bash
-$ npm install --save babel-polyfill
+$ npm install --save-dev @babel/polyfill
 ```
 
 然后，在脚本头部，加入如下一行代码。
 
 ```javascript
-import 'babel-polyfill';
+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 也可以用于浏览器环境。但是，从 Babel 6.0 开始，不再直接提供浏览器版本，而是要用构建工具构建出来。如果你没有或不想使用构建工具，可以使用[babel-standalone](https://github.com/Daniel15/babel-standalone)模块提供的浏览器版本，将其插入网页。
+Babel 也可以用于浏览器环境，使用[@babel/standalone](https://babeljs.io/docs/en/next/babel-standalone.html)模块提供的浏览器版本，将其插入网页。
 
 ```html
-<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.4.4/babel.min.js"></script>
+<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
 <script type="text/babel">
 // Your ES6 code
 </script>
 ```
 
 注意，网页实时将 ES6 代码转为 ES5，对性能会有影响。生产环境需要加载已经转码完成的脚本。
 
-下面是如何将代码打包成浏览器可以使用的脚本，以`Babel`配合`Browserify`为例。首先，安装`babelify`模块。
-
-```bash
-$ npm install --save-dev babelify babel-preset-latest
-```
-
-然后，再用命令行转换 ES6 脚本。
-
-```bash
-$  browserify script.js -o bundle.js \
-  -t [ babelify --presets [ latest ] ]
-```
-
-上面代码将 ES6 脚本`script.js`，转为`bundle.js`，浏览器直接加载后者就可以了。
-
-在`package.json`设置下面的代码，就不用每次命令行都输入参数了。
-
-```javascript
-{
-  "browserify": {
-    "transform": [["babelify", { "presets": ["latest"] }]]
-  }
-}
-```
-
-### 在线转换
-
 Babel 提供一个[REPL 在线编译器](https://babeljs.io/repl/)，可以在线将 ES6 代码转为 ES5 代码。转换后的代码，可以直接作为 ES5 代码插入网页运行。
 
-### 与其他工具的配合
-
-许多工具需要 Babel 进行前置转码，这里举两个例子：ESLint 和 Mocha。
-
-ESLint 用于静态检查代码的语法和风格，安装命令如下。
-
-```bash
-$ npm install --save-dev eslint babel-eslint
-```
-
-然后，在项目根目录下，新建一个配置文件`.eslintrc`，在其中加入`parser`字段。
-
-```javascript
-{
-  "parser": "babel-eslint",
-  "rules": {
-    ...
-  }
-}
-```
-
-再在`package.json`之中，加入相应的`scripts`脚本。
-
-```javascript
-  {
-    "name": "my-module",
-    "scripts": {
-      "lint": "eslint my-files.js"
-    },
-    "devDependencies": {
-      "babel-eslint": "...",
-      "eslint": "..."
-    }
-  }
-```
-
-Mocha 则是一个测试框架，如果需要执行使用 ES6 语法的测试脚本，可以修改`package.json`的`scripts.test`。
-
-```javascript
-"scripts": {
-  "test": "mocha --ui qunit --compilers js:babel-core/register"
-}
-```
-
-上面命令中，`--compilers`参数指定脚本的转码器，规定后缀名为`js`的文件，都需要使用`babel-core/register`先转码。
-
 ## Traceur 转码器
 
 Google 公司的[Traceur](https://github.com/google/traceur-compiler)转码器，也可以将 ES6 代码转为 ES5 代码。