- 使用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個階段)来氧，選裝一個
$ 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簡介](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é)果寫入一個文件
# --out-file 或 -o 參數(shù)指定輸出文件
$ babel example.js -o compiled.js
# 整個目錄轉(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)碼的時候考传，就執(zhí)行下面的命令吃型。
$ npm run build
babel-node
babel-cli 工具自帶一個 babel-node 命令，提供一個支持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 命令赐写，為它加上一個鉤子。每當(dāng)使用 require 加載 .js膜赃、.jsx挺邀、.es 和 .es6后綴名的文件，就會先用Babel轉(zhuǎn)碼跳座。
$ npm install --save-dev babel-register
使用時端铛，必須首先加載 babel-register。
require('babel-register');
require('./index.js');
然后就不需要手動對index.js轉(zhuǎn)碼了疲眷。
babel-register 只會對 require 命令加載的文件轉(zhuǎn)碼禾蚕，而不會對當(dāng)前文件轉(zhuǎn)碼。由于是實(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等全局對象，以及一些定義在全局對象上的方法(比如 Object.assign )都不會轉(zhuǎn)碼性芬。
舉例來說峡眶，ES6 在 Array 對象上新增了 Array.from 方法。Babel 就不會轉(zhuǎn)碼這個方法植锉。如果想讓這個方法運(yùn)行辫樱，必須使用 babel-polyfill，為當(dāng)前環(huán)境提供一個墊片俊庇。
安裝命令如下狮暑。
$ 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)碼彭沼，這里舉兩個例子：ESLint 和 Mocha缔逛。
ESLint 用于靜態(tài)檢查代碼的語法和風(fēng)格，安裝命令如下姓惑。
$ npm install --save-dev eslint babel-eslint
然后译株，在項(xiàng)目根目錄下，新建一個配置文件 .eslintrc挺益，在其中加入 parser 字段歉糜。
{
"parser": "babel-eslint",
"rules": {
···
}
}
Mocha是一個測試框架，如果需要執(zhí)行使用ES6 語法的測試腳本望众，可以修改 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)碼。
