babel是一個JavaScript編譯器,藉助轉換器可以使用最新的語法,而不必等待瀏覽器支援。但是隻支援語法轉換，而不支援新增 API。因此使用 babel 就分為兩方面：語法轉碼和 API 支援。
安裝
yarn add -D babel-cli babel-core babel-preset-env
複製程式碼在 Web 專案根目錄下，建立.babelrc 配置檔案,配置
{
"presets": ["env"]
}
複製程式碼這樣一個基本的可用配置就好了。
語法轉換
babel提供眾多的轉換包：
但是這樣需要一個一個引入，比較繁瑣又不好管理，因此提供了幾個外掛整合:
babel-preset-env是 babel 現在推薦安裝的，預設等同於 babel-preset-latest = babel-preset-es2015 + babel-preset-es2016 + babel-preset-es2017；另外最新的提案包含在 stage-* 中 最新提案連線
調整如下
yarn add -D babel-preset-stage-2
複製程式碼.babelrc
{
"presets": ["env","stage-2"],
}
複製程式碼polyfill
polyfill是一種墊片,使用舊版本方法模擬出新的API,但不保證支援所有特性。
目前有兩種使用方法,一種是新增到全域性環境中和增加原型方法;另外一種是作為一個library使用,不會汙染全域性環境和修改原型。幸好有人已經將其實現好了：core-js,對於不同的場景使用方法也不同(v2.5版本,最新版本已變動)：
- 瀏覽器引用完整編譯 client
- core.js 所有特性
- shim.js 只包括標準程式碼
- library.js 包含所有特性,但是不汙染全域性環境
- 按需引入
- fn 資料夾中指定內容
- library 資料夾中指定內容,但是不汙染全域性環境
- 引入一系列相關的特性,比如 es6/array,包括 ES6 Array 所有特性
- 自定義引入 modules 資料夾下,但是需要有足夠的瞭解
babel 引入了core-js的內容作為基礎，提供了 babel-polyfill 和 babel-runtime 外掛。
- babel-polyfill，檢視 babel-polyfill/lib/index.js 可以看到包含了 core-js/shim,regenerator-runtime/runtime,core-js/fn/regexp/escape, bable將這些內容統統打包進了 polyfill.js，因此使用時只需手動引入這一檔案即可。
- bable-runtime，babel-polyfill的缺點是打包後檔案較大，並且汙染了全域性環境。如果採用按需引入的方案，就需要手動一個一個的引入，因此 babel 提供了babel-runtime外掛,可以自動將引入。babel-runtime 的另一項功能是，babel提供了很多 helper 函式，預設情況下會新增進每個檔案中,使用 babel-runtime 外掛會從 babel-runtime 模組引入 helper 函式。
調整如下：
// babel-runtime 提供polyfill，babel-plugin-transform-runtime 作為自動引入polyfill的外掛
yarn add babel-runtime
yarn add -D babel-plugin-transform-runtime
複製程式碼.babelrc
{
"presets": ["env","stage-2"],
"plugins": ["transform-runtime"]
}
複製程式碼webpack配置babel
webpack作為主流的打包工具,配置babel是基本的操作。首先要安裝babel-loader
yarn add -D babel-loader
webpack.config.js
module: {
rules:[
{
test: /\.js$/,
<!--引入的第三方模組不轉碼-->
exclude: /node_modules/,
use: [{
loader: 'babel-loader',
options: {
<!--設定cache目錄，加快轉碼速度，預設目錄為 node_modules/.cache/babel-loader-->
cacheDirectory: true,
},
}],
},
]
},
<!--在開發模式下配置，通過chrome devtool/source/webpack-internal可以看到babel轉碼結果-->
devtool: 'cheap-module-eval-source-map',
複製程式碼.babelrc
{
"presets": [
["env", {
<!--預設會將模組轉換為commonjs, 設定為false 不轉換-->
"modules": false
}],
"stage-2"
],
"plugins": [transform-runtime"]
}
複製程式碼eslint 配置 babel
.eslintrc.js 配置解析器
parser: 'babel-eslint'
複製程式碼另外如果在webpack中配置eslint,還要保證eslint的檢查在babel轉碼之前,配置如下
module: {
rules:[{
// 保證先於 babel-loader 執行
enforce: 'pre',
test: /\.js$/,
exclude: /node_modules/,
loader: 'eslint-loader'
}]
}
複製程式碼