webpack4.0-使用babel处理ES6-06

去官网找配置https://www.babeljs.cn/

第一种方式：全局处理使用 babel/polyfill,该种方式会造成全局污染

webpack.config.js中的配置

npm install --save-dev babel-loader @babel/core

npm install @babel/preset-env --save-dev

npm install --save @babel/polyfill

 { 
      test: /\.js$/, 
      exclude: /node_modules/, 
      loader: "babel-loader", // 是webpack和loader通讯的桥梁, 但是babel-loader并不会把ES6转为ES5; babel/preset-env能够将ES6转为ES5
      options: { // 使用transform-runtime
                "presets": [["@babel/preset-env",{
                 "useBuiltIns": "usage", // 定义处理引用的语法 按需引入
                  "targets": {  // 定义运行浏览器的最小版本
                         "chrome": "58"
                     }
         }]] // 无法处理太新的方法 使用babel/polyfill能够处理，但是会污染全局
      }
  }

在需要处理的业务js代码模块中引入,babel/polyfill进行处理

import "@babel/polyfill"; // 使用babel/polyfill能够处理，但是会污染全局 使用 transform-runtime
const arr = [
    new Promise(() => {}),
    new Promise(() => {})
]
arr.map(item => {
    console.log(item);
})

第二种方式：使用transfrom-runtime进行闭包注入式,避免全局污染

webpack.config.js的配置

npm install --save-dev @babel/plugin-transform-runtime

npm install --save @babel/runtime

corejs使用 2 配置项

npm install --save @babel/runtime-corejs2

{ 
      test: /\.js$/, 
      exclude: /node_modules/, 
      loader: "babel-loader", // 是webpack和loader通讯的桥梁, 但是babel-loader并不会把ES6转为ES5; babel/preset-env能够将ES6转为ES5
      "options": {
            "plugins": [["@babel/plugin-transform-runtime",{ // 处理ES6转为ES5，以闭包方式注入，避免全局污染
       // 配置参数
       "corejs": 2, // 选择2库进行打包
       "helpers": true,
       "regenerator": true,
       "useESModules": false
       }]]
 }
}

或者将webpack.config.js中的options提取到配置文件.babelrc文件中

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