进入babel官网，找到webpack相关的配置
- 需要的依赖进行安装:
npm install --save-dev babel-loader @babel/core - 同时安装preset-env:
npm install @babel/preset-env --save-dev
babel-preset env,内置了es6的语法，语法转换
对webpack配置进行补充，自动将es6代码转换成es5。
虽然可以识别，但是打包出来的main.js仍然会有promise,map等信誉发，这样在一些浏览器上是不能识别并运行的。
所以需要安装一个语法补充包，也就是polly-fill。
安装：npm install --save @babel/polyfill
在入口文件引用：import "@babel/polyfill"
引用了pollyfill之后，它会自动对promise,map等语法进行实现，并将实现后的结果放置在main.js之中。这样main.js体积就会变地很大。对配置进行更改来减小main.js的体积。
babel官网，找到preset --> preset-env
image.png
- 对preset-env增加一个新的参数
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader",
options: {
"presets": [
+++ ["@babel/preset-env", {
+++ "useBuiltIns": "usage" //只会补充添加用到的es6语法
+++ }]
]
}
},
以上这种方案适合普通的业务代码。
如果要开发第三方组件库，不推荐使用polly fill。因为它会生成全局变量注入，导致变量污染。
- 使用
plugin-transform-runtime
plugin-transform-runtime是以闭包的方式运作，可以避免全局污染
在babel官网中找到plugin-transform-runtime的相关内容：
image.png
更改打包规则：
{
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中的内容过于臃肿，可以将babel的配置转移到babel.rc文件之中。
直接将options对应的内容复制即可。
image.png
