Babel是一個廣泛使用的轉碼器,可以將ES6代碼轉為ES5代碼,從而在現有環境執行。
這意味著,你可以現在就用 ES6 編寫程序,而不用擔心現有環境是否支持。下面是一個例子。
// 轉碼前
input.map(item => item + 1);
// 轉碼后
input.map(function (item) {
return item + 1;
});
上面的原始代碼用了箭頭函數,這個特性還沒有得到廣泛支持,Babel將其轉為普通函數,就能在現有的JavaScript環境執行了。
一、配置文件.babelrc
Babel的配置文件是.babelrc
,存放在項目的根目錄下。使用Babel的第一步,就是配置這個文件。
type num>.babelrc
創建無文件名文件
該文件用來設置轉碼規則和插件,基本格式如下。
{
"presets": [],
"plugins": []
}
presets
字段設定轉碼規則,官方提供以下的規則集,你可以根據需要安裝。
# ES2015轉碼規則
$ npm install --save-dev babel-preset-es2015
# react轉碼規則
$ npm install --save-dev babel-preset-react
# ES7不同階段語法提案的轉碼規則(共有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
然后,將這些規則加入.babelrc
。
二、命令行轉碼babel-cli
Babel提供babel-cli
工具,用于命令行轉碼。
它的安裝命令如下。
$ npm install --global babel-cli
基本用法如下。
# 轉碼結果輸出到標準輸出
$ babel example.js
# 轉碼結果寫入一個文件
# --out-file 或 -o 參數指定輸出文件
$ babel example.js --out-file compiled.js
# 或者
$ babel example.js -o compiled.js
# 整個目錄轉碼
# --out-dir 或 -d 參數指定輸出目錄
$ babel src --out-dir lib
# 或者
$ babel src -d lib
# -s 參數生成source map文件
$ babel src -d lib -s
上面代碼是在全局環境下,進行Babel轉碼。這意味著,如果項目要運行,全局環境必須有Babel,也就是說項目產生了對環境的依賴。另一方面,這樣做也無法支持不同項目使用不同版本的Babel。
一個解決辦法是將babel-cli
安裝在項目之中。
# 安裝
$ npm install --save-dev babel-cli
然后,改寫package.json
。
{
// ...
"devDependencies": {
"babel-cli": "^6.0.0"
},
"scripts": {
"build": "babel src -d lib"
},
}
轉碼的時候,就執行下面的命令。
$ npm run build
三、babel-polyfill插件
Babel 默認只轉換新的 JavaScript語句(syntax),而不轉換新的 API ,比如 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局對象,以及一些定義在全局對象上的方法(比如 Object.assign)都不會轉碼。Babel 默認不轉碼的 API 非常多。
為了完整使用 ES6 的 API ,我們只能安裝這個插件:
$ npm install -save-dev babel-polyfill
然后,在需要使用的文件的頂部引入
import "babel-polyfill"
node.js中
require("babel-polyfill")
webpack.config.js中
module.exports={
entry:["babel-polyfill","./app/js"]
}