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

edit intro/babel

This commit is contained in:
ruanyf 2015-11-30 10:51:39 +08:00
parent c6b9b0ce0d
commit 1228e708a5

View File

@ -127,6 +127,16 @@ input.map(function (item) {
```bash ```bash
$ npm install --global babel-cli $ npm install --global babel-cli
$ npm install --save babel-preset-es2015
```
然后在当前目录下,新建一个配置文件`.babelrc`
```javascript
// .babelrc
{
"presets": ['es2015']
}
``` ```
Babel自带一个`babel-node`命令提供支持ES6的REPL环境。它支持Node的REPL环境的所有功能而且可以直接运行ES6代码。 Babel自带一个`babel-node`命令提供支持ES6的REPL环境。它支持Node的REPL环境的所有功能而且可以直接运行ES6代码。
@ -181,10 +191,10 @@ $ babel -d build-dir source-dir -s
### 浏览器环境 ### 浏览器环境
Babel也可以用于浏览器。它的浏览器版本,可以通过安装`babel-core`模块获取。 Babel也可以用于浏览器。但是从Babel 6.0开始不再直接提供浏览器版本而是要用构建工具构建出来。如果你没有或不想使用构建工具只有通过安装5.x版本的`babel-core`模块获取。
```bash ```bash
$ npm install babel-core $ npm install babel-core@5
``` ```
运行上面的命令以后,就可以在当前目录的`node_modules/babel-core/`子目录里面,找到`babel`的浏览器版本`browser.js`(未精简)和`browser.min.js`(已精简)。 运行上面的命令以后,就可以在当前目录的`node_modules/babel-core/`子目录里面,找到`babel`的浏览器版本`browser.js`(未精简)和`browser.min.js`(已精简)。
@ -202,23 +212,27 @@ $ npm install babel-core
这种写法是实时将ES6代码转为ES5对网页性能会有影响。生产环境需要加载已经转码完成的脚本。 这种写法是实时将ES6代码转为ES5对网页性能会有影响。生产环境需要加载已经转码完成的脚本。
`Babel`配合`Browserify`一起使用,可以生成浏览器能够直接加载的脚本。 下面是`Babel`配合`Browserify`一起使用,可以生成浏览器能够直接加载的脚本。首先,安装`babelify`模块。
```bash ```bash
$ browserify script.js -t babelify --outfile bundle.js $ npm install --save-dev babelify babel-preset-2015
``` ```
上面代码将ES6脚本`script.js`,转为`bundle.js`。浏览器直接加载后者就可以了,不用再加载`browser.js` 然后再用命令行转换ES6脚本。
```bash
$ browserify script.js -o bundle.js \
-t [ babelify --presets [ es2015 react ] ]
```
上面代码将ES6脚本`script.js`,转为`bundle.js`,浏览器直接加载后者就可以了。
`package.json`设置下面的代码,就不用每次命令行都输入参数了。 `package.json`设置下面的代码,就不用每次命令行都输入参数了。
```javascript ```javascript
{ {
// ...
"browserify": { "browserify": {
"transform": [ "transform": [["babelify", { "presets": ["es2015"] }]]
["babelify", { "stage": [0] }]
]
} }
} }
``` ```
@ -227,34 +241,63 @@ $ browserify script.js -t babelify --outfile bundle.js
Node脚本之中需要转换ES6脚本可以像下面这样写。 Node脚本之中需要转换ES6脚本可以像下面这样写。
先安装`babel-core` 先安装`babel-core``babel-preset-2015`
```javascript ```javascript
$ npm install --save-dev babel-core $ npm install --save-dev babel-core babel-preset-2015
```
然后,在项目根目录下新建一个`.babelrc`文件。
```javascript
{
"presets": ["es2015"]
}
``` ```
然后在脚本中,调用`babel-core``transform`方法。 然后在脚本中,调用`babel-core``transform`方法。
```javascript ```javascript
require("babel-core").transform("code", options); var es5Code = 'let x = n => n + 1';
var es6Code = require('babel-core')
.transform(es5Code, {presets: ['es2015']})
.code;
// '"use strict";\n\nvar x = function x(n) {\n return n + 1;\n};'
``` ```
上面代码中,`transform`方法的第一个参数是一个字符串表示ES6代码。 上面代码中,`transform`方法的第一个参数是一个字符串,表示需要转换的ES5代码第二个参数是转换的配置对象
Node脚本还有一种特殊的`babel`用法,即把`babel`加载为`require`命令的一个钩子。先将`babel`全局安装 Node脚本还有一种特殊的`babel`用法,即把`babel`加载为`require`命令的一个钩子。安装`babel-core``babel-preset-es2015`以后,先在项目的根目录下面,设置一个配置文件`.babelrc`
```bash ```javascript
$ npm install -g babel // .babelrc
{
"presets": ["es2015"]
}
``` ```
然后在你的应用的入口脚本entry script头部加入下面的语句。 然后在你的应用的入口脚本entry script头部加入下面的语句。
```javascript ```javascript
require("babel/register"); require("babel-core/register");
``` ```
有了上面这行语句,后面所有通过`require`命令加载的后缀名为`.es6``.es``.jsx``.js`的脚本,都会先通过`babel`转码后再加载。 有了上面这行语句,后面所有通过`require`命令加载的后缀名为`.es6``.es``.jsx``.js`的脚本,都会先通过`babel`转码后再加载。
需要注意的是Babel默认不会转换Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象以及一些定义在全局对象上的方法比如`Object.assign`)。如果你用到了这些功能,当前的运行环境又不支持。就需要安装`babel-polyfill`模块。
```bash
$ npm install babel-polyfill --save
```
然后,在所有脚本头部加上一行。
```javascript
require('babel-polyfill');
// 或者
import 'babel-polyfill';
```
### 在线转换 ### 在线转换
Babel提供一个[REPL在线编译器](https://babeljs.io/repl/)可以在线将ES6代码转为ES5代码。转换后的代码可以直接作为ES5代码插入网页运行 Babel提供一个[REPL在线编译器](https://babeljs.io/repl/)可以在线将ES6代码转为ES5代码。转换后的代码可以直接作为ES5代码插入网页运行