看一下 Babel 官網上的定義,馬上就能明白 Babel 的功用。
在 ES6 之後,ECMAScript 版本每年都會更新,2018 年已經來到 ES9 了。而 Babel 可以將新版的 ES 功能轉譯為 ES5,這樣舊版的瀏覽器才能夠正常運作。
Babel 的功用很清楚,但究竟該怎麼配置一直都是一知半解。比如:
babel-polyfill
跟 transform-runtime
又是甚麼?這次為了導入 Webpack 有稍微做一下功課,整理如下
ECMAScript是一種由 Ecma 國際(前身為歐洲電腦製造商協會)通過 ECMA-262 標準化的指令碼程式設計語言。 ( Wikipedia )
Javascript 就是基於 ECMAScript 實作的語言,ECMAScript 標準分為幾個階段:
理解 ECMAScript 標準,以後在專案中使用新版 ES 功能,只要根據該功能目前在ECMAScript 標準中處在哪個階段,Babel 在調整相對應的配置即可。不清楚功能是在哪個階段可以到這邊查詢 ECMAScript proposals
先介紹一下 Babel 各個模組
Babel 的核心模組,提供 Babel 核心 API 給其它 Plugin 使用。
可以透過 command Line 執行 Babel 轉譯作業
Babel 處理轉譯 ES5 的流程時,只是處理語法上的轉譯,比如 const、let 轉譯為 var 或是箭頭函式轉譯為 function。若是像 Promise 這種新版的 API 功能,就須要透過 babel-polyfill
提供的功能才能實現。
透過 presets 的設定,就可以使用 Babel 幫我們配置好的一些功能。網路上會找到一些 babel-preset-es2015 / es2016 / es2017 的配置,官方已經建議廢棄了,目前官方唯一推薦的就是 babel-preset-env
。
專案使用 React 需要配置這個功能。
包含 preset-stage-2、preset-stage-3 等功能,因為我們專案有使用到 transform-export-extensions
這個功能,所以需要配置。
export Product from 'Product'
等價於
import Product from 'Product'
export Product
將 Babel 轉譯的功能,集成到 Webpack 打包流程。
專案配置如下
{
presets: [
[
'env',
{
debug: false,
useBuiltIns: true,
modules: false
}
],
'react',
'stage-0'
],
plugins: ['transform-decorators-legacy']
}
module: {
rules: [
{
test: /\.(js|jsx)$/,
include: path.join(__dirname, 'Resource'),
exclude: /node_modules/,
use: {
loader: 'babel-loader',
query: {
cacheDirectory: './Resource/Webpack_cache/'
},
}
}
]
}