- 使用Babel第一步，需要寫
.babelrc配置文件。
基本格式如下:
{
"presets": [],
"plugins": []
}
presets 字段設(shè)定轉(zhuǎn)碼規(guī)則，官方提供一下的規(guī)則集，你可以根據(jù)需要安裝。
#最新轉(zhuǎn)碼規(guī)則
$ npm install --save-dev babel-preset-latest
#react 轉(zhuǎn)碼規(guī)則
$ npm install --save-dev babel-preset-react
# 不同階段語法填的轉(zhuǎn)碼規(guī)則(共有4個(gè)階段)，選裝一個(gè)
$ 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
> 語法提案階段詳細(xì)見[ECMAScript6簡(jiǎn)介](http://es6.ruanyifeng.com/#docs/intro)
- 然后，將這些規(guī)則加入
.babelrc
{
"presets": [
"latest",
"react",
"stage-2"
],
"plugins": []
}
一下所有Babel工具和模塊的使用，都必須先寫好
.babelrc
- 命令行轉(zhuǎn)碼babel-cli
Babel提供babel-cli工具，用于命令行轉(zhuǎn)碼。
安裝命令如下：
$ npm install -g babel-cli
基本用法如下：
# 轉(zhuǎn)碼結(jié)果輸出到標(biāo)準(zhǔn)輸出
$ babel example.js
# 轉(zhuǎn)碼結(jié)果寫入一個(gè)文件
# --out-file 或 -o 參數(shù)指定輸出文件
$ babel example.js -o compiled.js
# 整個(gè)目錄轉(zhuǎn)碼
# --out-dir 或 -d 參數(shù)指定輸出目錄
$ babel src -d lib
# -s 參數(shù)生成source map文件
$ babel src -d lib -s
- 項(xiàng)目環(huán)境下babel-cli
#安裝
$ npm install --save-dev babel-cli
然后，改寫package.json
{
// ...
"devDependencies": {
"babel-cli": "^6.0.0"
},
"scripts": {
"build": "babel src -d lib"
}
}
轉(zhuǎn)碼的時(shí)候，就執(zhí)行下面的命令。
$ npm run build
babel-node
babel-cli 工具自帶一個(gè) babel-node 命令，提供一個(gè)支持ES6的REPL環(huán)境。它支持Node的REPL環(huán)境的所有功能，而且可以直接運(yùn)行ES6的代碼。執(zhí)行 babel-node 就進(jìn)入REPL環(huán)境：
$ babel-node
> (x => x * 2)(1)
2
babel-node 命令可以直接運(yùn)行ES6腳本。
$ babel-node es6.js
2
babel-register
babel-register 模塊改寫 require 命令，為它加上一個(gè)鉤子。每當(dāng)使用 require 加載 .js、.jsx、.es 和 .es6后綴名的文件，就會(huì)先用Babel轉(zhuǎn)碼。
$ npm install --save-dev babel-register
使用時(shí)，必須首先加載 babel-register。
require('babel-register');
require('./index.js');
然后就不需要手動(dòng)對(duì)index.js轉(zhuǎn)碼了。
babel-register 只會(huì)對(duì) require 命令加載的文件轉(zhuǎn)碼，而不會(huì)對(duì)當(dāng)前文件轉(zhuǎn)碼。由于是實(shí)時(shí)轉(zhuǎn)碼，所以只適合在開發(fā)環(huán)境使用。
babel-core
如果某些代碼需要調(diào)用 Babel 的 API 進(jìn)行轉(zhuǎn)碼，就要使用 babel-core 模塊。
安裝命令如下。
$ npm install babel-core --save
然后，在項(xiàng)目中就可以調(diào)用 babel-core。
var babel = require('babel-core');
// 字符串轉(zhuǎn)碼
babel.transform('code();', options);
// => { code, map, ast }
// 文件轉(zhuǎn)碼(異步)
babel.transformFile('filename.js', options, function (err, result) {
return; // => { code, map, ast }
})
// 文件轉(zhuǎn)碼(同步)
babel.transformFileSync('filename.js', options)
// => { code, map, ast }
//Babel AST轉(zhuǎn)碼
babel.transformFromAst(ast, code, options);
// => { code, map, ast }
例子。
var es6Code = 'let x = n => n + 1';
var es5Code = require('babel-core')
es5Code.transform(es6Code, {
presets: ['latest']
}).code;
// '"use strict";\n\nvar x = function x(n) {\n return n + 1;\n};'
babel-polyfill
Babel 默認(rèn)只轉(zhuǎn)換新的 JavaScript 語法，而不轉(zhuǎn)換新的 API，比如 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局對(duì)象，以及一些定義在全局對(duì)象上的方法(比如 Object.assign )都不會(huì)轉(zhuǎn)碼。
舉例來說，ES6 在 Array 對(duì)象上新增了 Array.from 方法。Babel 就不會(huì)轉(zhuǎn)碼這個(gè)方法。如果想讓這個(gè)方法運(yùn)行，必須使用 babel-polyfill，為當(dāng)前環(huán)境提供一個(gè)墊片。
安裝命令如下。
$ npm install --save babel-polyfill
然后，在腳本頭部，加入如下一行代碼。
import 'babel-polyfill';
或者
require('babel-polyfill');
Babel 默認(rèn)不轉(zhuǎn)碼的 API 非常多，詳細(xì)清單可以查看 babel-plugin-transform-runtime 模塊的definitions.js文件
與其它工具的配合
許多工具需要 Babel 進(jìn)行前置轉(zhuǎn)碼，這里舉兩個(gè)例子：ESLint 和 Mocha。
ESLint 用于靜態(tài)檢查代碼的語法和風(fēng)格，安裝命令如下。
$ npm install --save-dev eslint babel-eslint
然后，在項(xiàng)目根目錄下，新建一個(gè)配置文件 .eslintrc，在其中加入 parser 字段。
{
"parser": "babel-eslint",
"rules": {
···
}
}
Mocha是一個(gè)測(cè)試框架，如果需要執(zhí)行使用ES6 語法的測(cè)試腳本，可以修改 pageage.json 的 scripts.test。
"scripts": {
"test": "mocha --ui qunit --compilers js:babel-core/register"
}
上面命令中，--compilers 參數(shù)指定腳本的轉(zhuǎn)碼器，規(guī)定后綴名為 js 的文件，都需要使用 babel-core/register 先轉(zhuǎn)碼。
