mirror of
https://github.com/ruanyf/es6tutorial.git
synced 2025-05-24 10:22:23 +00:00
edit intro/babel
This commit is contained in:
parent
c6b9b0ce0d
commit
1228e708a5
@ -127,6 +127,16 @@ input.map(function (item) {
|
||||
|
||||
```bash
|
||||
$ npm install --global babel-cli
|
||||
$ npm install --save babel-preset-es2015
|
||||
```
|
||||
|
||||
然后在当前目录下,新建一个配置文件`.babelrc`。
|
||||
|
||||
```javascript
|
||||
// .babelrc
|
||||
{
|
||||
"presets": ['es2015']
|
||||
}
|
||||
```
|
||||
|
||||
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
|
||||
$ npm install babel-core
|
||||
$ npm install babel-core@5
|
||||
```
|
||||
|
||||
运行上面的命令以后,就可以在当前目录的`node_modules/babel-core/`子目录里面,找到`babel`的浏览器版本`browser.js`(未精简)和`browser.min.js`(已精简)。
|
||||
@ -202,23 +212,27 @@ $ npm install babel-core
|
||||
|
||||
这种写法是实时将ES6代码转为ES5,对网页性能会有影响。生产环境需要加载已经转码完成的脚本。
|
||||
|
||||
`Babel`配合`Browserify`一起使用,可以生成浏览器能够直接加载的脚本。
|
||||
下面是`Babel`配合`Browserify`一起使用,可以生成浏览器能够直接加载的脚本。首先,安装`babelify`模块。
|
||||
|
||||
```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`设置下面的代码,就不用每次命令行都输入参数了。
|
||||
|
||||
```javascript
|
||||
{
|
||||
// ...
|
||||
"browserify": {
|
||||
"transform": [
|
||||
["babelify", { "stage": [0] }]
|
||||
]
|
||||
"transform": [["babelify", { "presets": ["es2015"] }]]
|
||||
}
|
||||
}
|
||||
```
|
||||
@ -227,34 +241,63 @@ $ browserify script.js -t babelify --outfile bundle.js
|
||||
|
||||
Node脚本之中,需要转换ES6脚本,可以像下面这样写。
|
||||
|
||||
先安装`babel-core`。
|
||||
先安装`babel-core`和`babel-preset-2015`。
|
||||
|
||||
```javascript
|
||||
$ npm install --save-dev babel-core
|
||||
$ npm install --save-dev babel-core babel-preset-2015
|
||||
```
|
||||
|
||||
然后,在项目根目录下新建一个`.babelrc`文件。
|
||||
|
||||
```javascript
|
||||
{
|
||||
"presets": ["es2015"]
|
||||
}
|
||||
```
|
||||
|
||||
然后在脚本中,调用`babel-core`的`transform`方法。
|
||||
|
||||
```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
|
||||
$ npm install -g babel
|
||||
```javascript
|
||||
// .babelrc
|
||||
{
|
||||
"presets": ["es2015"]
|
||||
}
|
||||
```
|
||||
|
||||
然后,在你的应用的入口脚本(entry script)头部,加入下面的语句。
|
||||
|
||||
```javascript
|
||||
require("babel/register");
|
||||
require("babel-core/register");
|
||||
```
|
||||
|
||||
有了上面这行语句,后面所有通过`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代码插入网页运行
|
||||
|
Loading…
x
Reference in New Issue
Block a user