常用loader - babel-loader - 《webpack》

This package allows transpiling JavaScript files using Babel and webpack.

babel是一个JavaScript编译器和“编译器”。 babel 可以将现代JS(es6, es7…)转换为可以在（几乎）任何浏览器中运行的兼容代码。

webpack 本身并不知道如何转换JavaScript代码。 该任务已外包给babel的第三方 loader，特别是babel-loader。

要使用它，我们需要安装一些 Loader:

babel-core ：把 js 代码分析成 ast ，方便各个插件分析语法进行相应的处理
babel-preset-env：将现代 JS 编译为ES5
babel-loader ：用于 webpack

npm install --save-dev babel-loader @babel/core
// @babel/core 是babel中的一个核心库
npm install --save-dev @babel/preset-env
// preset-env 这个模块就是将语法翻译成es5语法,这个模块包括了所有翻译成es5语法规则
npm install --save @babel/polyfill
// 将Promise,map等低版本中没有实现的语法,用polyfill来实现.

配置：

module: {
  rules: [
    {
            test: /\.js$/,
            exclude: /node_modules/,
            loader: "babel-loader",
            options: {
                "presets": [
                    [
                        "@babel/preset-env",
                        {
                            "useBuiltIns": "usage"
                        }
                    ]
                ]
            }
        }
  ]
}
// exclude参数: node_modules目录下的js文件不需要做转es5语法,也就是排除一些目录
// "useBuiltIns"参数:

"useBuiltIns": "usage"
// 该配置作用: 只会对我们index.js当前要打包的文件中使用过的语法,
// 比如Promise,map做polyfill,其他es6未出现的语法,我们暂时不去做polyfill,
// 这样子,打包后的文件就减少体积了

总结

@babel/preset-env 它包含了es6翻译成es5的语法规则
@babel/polyfill 解决了低版本浏览器无法实现的一些es6语法,使用polyfill自己来实现
通过import "@babel/polyfill"; 在js文件开头引入,完成对es6语法的polyfill
以上的场景都是解决的问题是业务中遇到babel的问题

注意
当你生成第三方模块时,或者是生成UI组件库时,使用polyfill解决问题,就会出现问题了。上面的场景使用babel会污染全局环境,这个时候,我们需要换一种方案来解决
@babel/plugin-transform-runtime这个库就能解决我们的问题。

可以在根目录下建一个.babelrc文件,将原本要在options中的配置信息写在.babelrc文件

{

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

这样子的话,在使用语法是,就不需要去通过import "@babel/polyfill";这样子的语法去完成了

总结：

从业务场景来看,可以使用@babel/preset-env
从自己生成第三方库或者UI组件库时,使用@babel/plugin-transform-runtime,它作用是将 helper 和 polyfill 都改为从一个统一的地方引入，并且引入的对象和全局变量是完全隔离的,避免了全局的污染

参考资料：
1.https://juejin.im/post/6859888538004783118