Babel編譯es6
阿新 • • 發佈:2017-09-13
object target 全局環境 語法 build dev .config plugins aps
Babel是一個廣泛使用的轉碼器,可以將ES6代碼轉為ES5代碼,從而在現有環境執行。
這意味著,你可以現在就用 ES6 編寫程序,而不用擔心現有環境是否支持。下面是一個例子。
// 轉碼前
input.map(item => item + 1);
// 轉碼後
input.map(function (item) {
return item + 1;
});
上面的原始代碼用了箭頭函數,這個特性還沒有得到廣泛支持,Babel將其轉為普通函數,就能在現有的JavaScript環境執行了。
一、配置文件.babelrc
Babel的配置文件是.babelrc
,存放在項目的根目錄下。使用Babel的第一步,就是配置這個文件。
該文件用來設置轉碼規則和插件,基本格式如下。
{
"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"]
}
Babel編譯es6