(精华)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/
}

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
 

.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",{
              
            }]
       ]
} 

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
 

@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 } ]
       ]
} 

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
 

文章来源: codeboy.blog.csdn.net，作者：愚公搬代码，版权归原作者所有，如需转载，请联系作者。

原文链接：codeboy.blog.csdn.net/article/details/107294416