【webpack】babel在webpack中的配置以及参数意思

背景

• 最近总听很多人在问babel-polyfill到底要不要了？我于是到处百度搜资料整理了下。

babel-polyfill相关

• 7.0版本前是babel-core babel-polyfill babel-runtime
• 之后就变成了作用域包：@babel/core @babel/polyfill @babel/runtime
• 在7.4后@babel/polyfill被废弃。不用怀疑，无论是npm上还是babel官网上都写是废弃了。
• 实际上以前这个polyfill包里面有2个包，一个叫core-js，另一个叫regenerator-runtime，而core-js是一个js标准库的polyfill，所以以前装polyfill本质其实是找的这个包。现在为啥被废弃？官网这么解释：

@babel/polyfill is a wrapper package which only includes imports of stable core-js features (in Babel 6 it also included proposals) and regenerator-runtime/runtime, needed by transpiled generators and async functions. This package doesn’t make it possible to provide a smooth migration path from core-js@2 to core-js@3: for this reason, it was decided to deprecate @babel/polyfill in favor of separate inclusion of required parts of core-js and regenerator-runtime.

• 简单来说，就是作者认为这个@babel/polyfill这个包，它没办法让大家稳定的从core-js@2升级到core-js@3所以这个包就给废弃了。那么这个2和3有多少区别？见网址，简单来说就是es9es10里2没实现的，3全都有。另外以后有新的标准会往3加不会往2加。

babel-runtime相关

• 通过前面可以发现，babel-polyfill本来除了corjs还有个regenerator，那么我们配置的时候是否要装@babel/plugin-transform-regenerator(以前命名跟上面一样)？我查了很多资料发现，@babel/runtime里面自带了个编译generator的，但是编译的语法并不彻底，也就是包括ie8及以下并不识别。所以如果生成器环境运行有问题，是需要装这个插件，通常情况是不需要装这个插件的。
• 另外还有大家比较常装的@babel/plugin-transform-runtime，它也要结合@babel/runtime一起使用，主要功能是提取转换后的公用代码，减少代码冗余。这个配置里有corejs配置，和preset-env里的corejs重了，有人文章里说只要配一个，配上面配下面都行，我个人试验发现配插件里面不行，必须配到preset-env上，不然会报Can't resolve '@babel/runtime-corejs3/helpers/classCallCheck'这种错误。插件格式如下：官网

{
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "absoluteRuntime": false,
        "corejs": false,
        "helpers": true,
        "regenerator": true,
        "useESModules": false
      }
    ]
  ]
}

preset-env相关

• 现在我们webpack一般使用的是@babel/preset-env，这个包以前有好几种，叫babel-preset-es2015之类的，后来一个个导太麻烦，直接做成了个babel-preset-lastest，最后又统一扔进这个env里，反正就是个常用配置包。
• 常用大概配置如下：再附上官网查更多设置。

 "presets":[
 	["@babel/preset-env",
      	{
		    "targets": { // 配支持的环境    "> 0.25%, not dead"
		          "browsers": [ // 浏览器   
		            "last 2 versions",
		            "safari >= 7"
		          ],
		          "node": "current"
	        },
	        "modules": true,  //"amd" | "umd" | "systemjs" | "commonjs" | "cjs" | "auto" | false, defaults to "auto".
	        "debug": true, // debug，编译的时候 console
	        "useBuiltIns": false, // "usage" | "entry" | false, defaults to false.
	        "include": [], // 总是启用哪些 plugins
	        "exclude": []  // 强制不启用哪些 plugins，用来防止某些插件被启用
	        "loose":false,//boolean, defaults to false.Enable "loose" transformations for any plugins in this preset that allow them.
	        "corjs":3//corejs2, 3 or { version: 2 | 3, proposals: boolean }, defaults to 2.
      	}
  	]
]

• 值得说的就是这里的corjs配置，如果你要编译比较新的语法，那么就需要配置上corjs，preset-env会调用它。否则会给你报错，问你需要指定哪个corjs进行编译。
• 另外还有useBuiltIns这选项选usage就对了，按需引入，entry是全导入。

总结

• 一般简单的配.babelrc就这样就行了：

{
    "presets": [
        ["@babel/preset-env",{
            "corejs":3,
            "useBuiltIns":"usage"  
        }]
    ],
    "plugins": [
        ["@babel/plugin-transform-runtime"]
    ]
}

• webpack上使用需要装babel-loader @babel/runtime @babel/plugin-transform-runtime @babel/preset-env @babel/core core-js@3

cnpm i babel-loader @babel/runtime @babel/plugin-transform-runtime @babel/preset-env @babel/core core-js@3 -D

• webpack通过babel-loader调用core，core需要用到preset-env，env又需要corejs。插件的transform-runtime需要依赖runtime,大概就是这个关系。