進入babel官網(wǎng)，找到webpack相關(guān)的配置
- 需要的依賴進行安裝:
npm install --save-dev babel-loader @babel/core - 同時安裝preset-env:
npm install @babel/preset-env --save-dev
babel-preset env,內(nèi)置了es6的語法，語法轉(zhuǎn)換
對webpack配置進行補充，自動將es6代碼轉(zhuǎn)換成es5。
雖然可以識別，但是打包出來的main.js仍然會有promise,map等信譽發(fā)，這樣在一些瀏覽器上是不能識別并運行的。
所以需要安裝一個語法補充包，也就是polly-fill。
安裝：npm install --save @babel/polyfill
在入口文件引用：import "@babel/polyfill"
引用了pollyfill之后，它會自動對promise,map等語法進行實現(xiàn)，并將實現(xiàn)后的結(jié)果放置在main.js之中。這樣main.js體積就會變地很大。對配置進行更改來減小main.js的體積。
babel官網(wǎng)，找到preset --> preset-env
image.png
- 對preset-env增加一個新的參數(shù)
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader",
options: {
"presets": [
+++ ["@babel/preset-env", {
+++ "useBuiltIns": "usage" //只會補充添加用到的es6語法
+++ }]
]
}
},
以上這種方案適合普通的業(yè)務(wù)代碼。
如果要開發(fā)第三方組件庫，不推薦使用polly fill。因為它會生成全局變量注入，導(dǎo)致變量污染。
- 使用
plugin-transform-runtime
plugin-transform-runtime是以閉包的方式運作，可以避免全局污染
在babel官網(wǎng)中找到plugin-transform-runtime的相關(guān)內(nèi)容：
image.png
更改打包規(guī)則：
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader",
options: {
// "presets": [
// ["@babel/preset-env", {
// "targets": {
// chrome: "67"
// },
// "useBuiltIns": "usage"
// }]
// ]
plugins: [
[
"@babel/plugin-transform-runtime",
{
"absoluteRuntime": false,
"corejs": 2, //推薦使用2,只開起promise這種全局變量
"helpers": true,
"regenerator": true,
"useESModules": false,
"version": "7.0.0-beta.0"
}
]
]
}
}
如果對corejs改為非false的值，需要重新全裝依賴。
image.png
這樣依賴babel的那種方案就非常清晰了，此時webpack.config.js中的內(nèi)容過于臃腫，可以將babel的配置轉(zhuǎn)移到babel.rc文件之中。
直接將options對應(yīng)的內(nèi)容復(fù)制即可。
image.png
