(精华)2020年7月12日 webpack 增加 babel⽀持

在开发依赖包安装如下插件：

yarn add @babel/core babel-loader @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-transform-modules-commonjs -D

在线上依赖包安装

yarn add @babel/runtime -D

//babel 配置 
{
     
  test: /\.(jsx|js)$/,
  use: {
     
    loader: 'babel-loader',
    // options:{ 
    //   presets:[ "@babel/preset-env" ]  //方法一
    // } 
  },
  exclude: /node_modules/
}

.babelrc (方法二)

{
      
    "presets": [
        [ 
           "@babel/preset-env", {
      
               "useBuiltIns": "usage", //按需注入
               "corejs": "2", // 声明corejs版本
               "targets": {
      
                   "browsers": [ "> 1%", "last 5 versions", "ie >= 8" ] 
               } 
           }
        ]
       ],
       "plugins":[
        // This plugin transforms ES2015 modules to CommonJS.
            ["@babel/plugin-transform-runtime",{
     
              
            }]
       ]
} 

@babel/plugin-transform-runtime
防止全局污染

yarn add @babel/plugin-transform-runtime --dev
yarn add @babel/runtime–save
yarn add @babel/runtime-corejs2 //有错误才安装
yarn add @babel/polyfill --dev

{
      
    "presets": [
        [ 
           "@babel/preset-env", {
      
               "useBuiltIns": "usage", //按需注入
               "corejs": "2", // 声明corejs版本
               "targets": {
      
                   "browsers": [ "> 1%", "last 5 versions", "ie >= 8" ] 
               } 
           }
        ]
       ],
       "plugins":[
        // This plugin transforms ES2015 modules to CommonJS.
            ["@babel/plugin-transform-runtime", {
      "absoluteRuntime":false, "corejs":2, "helpers":true, "regenerator":true, "useESModules":false } ]
       ]
}