webpack打包js之babel全局垫片和局部垫片

全局垫片polyfill,

这个库将会模拟一个完全的 ES2015+ 的环境。

这意味着你可以使用 新的内置语法 比如 promise 或者 WeakMap， 静态方法比如Array.from 或 Object.assign, 实例方法 比如 Array.prototype.includes 和 generator 函数。

使用的时候按照webpack官网去下载相应的babel包

npm install --save-dev bable-loader @babel/core @babel/preset-env;

{
    test: /\.js$/,
    exclude: /node_modules/, 
    use: {
      loader: 'babel-loader',
      options: {
        presets: [["@babel/preset-env"],{
          "useBuiltIns":"usage",
          "targets":{   //表示的是当前js在浏览器的版本
            "chrome":"67",
            "ie":"9"
           }
        }]
      }
    }
}

上面的基础的配置方法

polyfill 用起来很方便，但是你应该和 @babel/preset-env 以及 useBuiltIns 的option 一起用。如果不这样做的话需要手动引入需要的每个polyfill   也就是在每个js文件的第一行就去引入polyfill (import @babel/polyfill);

babel只会转换E6语法，而不会转换新的api，让新的api生效的方法是使用传统的polyfill，为此需要引入这个模块

 

局部垫片

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

添加配置文件 .babelrc  写入以下配置内容

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

这段配置可以写入到.babelrc和webpack的配置文件中 都可以生效，但是加上这段代码了之后   打包的时候会出现报错  说是还有一个依赖包没有下载回来

ERROR in ./src/js/index.js 3:0-80
Module not found: Error: Can't resolve '@babel/runtime-corejs2/helpers/asyncToGenerator' in '/Users/zhangweien/myProject/zhaopin/src/js'

那么需要继续去下载依赖包   npm install --save @babel/runtime-corejs2  下载成功之后就可以继续去打包了