mirror of
https://github.com/ruanyf/es6tutorial.git
synced 2025-05-29 05:42:20 +00:00
docs(intro): update babel
This commit is contained in:
ruanyf
parent
1b95b97b13
commit
8240374c62
227
docs/intro.md
227
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,16 +133,10 @@ 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`。
|
||||
@ -144,9 +144,8 @@ $ npm install --save-dev babel-preset-stage-3
|
||||
```javascript
|
||||
{
|
||||
"presets": [
|
||||
"latest",
|
||||
"react",
|
||||
"stage-2"
|
||||
"@babel/env",
|
||||
"@babel/preset-react"
|
||||
],
|
||||
"plugins": []
|
||||
}
|
||||
@ -154,75 +153,52 @@ $ npm install --save-dev babel-preset-stage-3
|
||||
|
||||
注意，以下所有 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
|
||||
```
|
||||
|
||||
上面代码是在全局环境下，进行 Babel 转码。这意味着，如果项目要运行，全局环境必须有 Babel，也就是说项目产生了对环境的依赖。另一方面，这样做也无法支持不同项目使用不同版本的 Babel。
|
||||
|
||||
一个解决办法是将`babel-cli`安装在项目之中。
|
||||
|
||||
```bash
|
||||
# 安装
|
||||
$ npm install --save-dev babel-cli
|
||||
```
|
||||
|
||||
然后，改写`package.json`。
|
||||
|
||||
```javascript
|
||||
{
|
||||
// ...
|
||||
"devDependencies": {
|
||||
"babel-cli": "^6.0.0"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "babel src -d lib"
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
转码的时候，就执行下面的命令。
|
||||
|
||||
```javascript
|
||||
$ npm run build
|
||||
$ npx babel src -d lib -s
|
||||
```
|
||||
|
||||
### babel-node
|
||||
|
||||
`babel-cli`工具自带一个`babel-node`命令，提供一个支持 ES6 的 REPL 环境。它支持 Node 的 REPL 环境的所有功能，而且可以直接运行 ES6 代码。
|
||||
`@babel/node`模块的`babel-node`命令，提供一个支持 ES6 的 REPL 环境。它支持 Node 的 REPL 环境的所有功能，而且可以直接运行 ES6 代码。
|
||||
|
||||
它不用单独安装，而是随`babel-cli`一起安装。然后，执行`babel-node`就进入 REPL 环境。
|
||||
首先，安装这个模块。
|
||||
|
||||
```bash
|
||||
$ babel-node
|
||||
$ npm install --save-dev @babel/node
|
||||
```
|
||||
|
||||
然后，执行`babel-node`就进入 REPL 环境。
|
||||
|
||||
```bash
|
||||
$ npx babel-node
|
||||
> (x => x * 2)(1)
|
||||
2
|
||||
```
|
||||
@ -230,61 +206,43 @@ $ babel-node
|
||||
`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 模块
|
||||
|
||||
`@babel/register`模块改写`require`命令，为它加上一个钩子。此后，每当使用`require`加载`.js`、`.jsx`、`.es`和`.es6`后缀名的文件，就会先用 Babel 进行转码。
|
||||
|
||||
```bash
|
||||
$ npm install --save-dev babel-cli
|
||||
$ npm install --save-dev @babel/register
|
||||
```
|
||||
|
||||
然后，改写`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`。
|
||||
|
||||
```bash
|
||||
$ npm install --save-dev 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,25 +289,25 @@ 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>
|
||||
@ -355,81 +315,8 @@ Babel 也可以用于浏览器环境。但是，从 Babel 6.0 开始，不再直
|
||||
|
||||
注意，网页实时将 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 代码。
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user