webpack4.0(四)：babel

什么是babel

ES6是ECMAScript在2015年发布的下一代JavaScript语法，它引入了一些新的语法和API，但是这些新的语法和API只有在最新的浏览器中才会得到支持，就算是现在仍然有一部分浏览器不支持ES6。所以我们需要一个转换工具，将ES6+的语法转换为ES5的语法。而babel就是这样一个转换工具。

本文的babel讲解基于babel7。

babel

babel在执行编译的时候，会从项目根目录下的.babelrc中或者babel-loader的options中读取其配置。.babelrc是一个json格式的文件，其中主要是对预设（presets）和 插件（plugins）的配置。

{
    "presets": [ 
        [
            "@babel/preset-env",
            {
                "targets": {
                    "edge": "17",
                    "firefox": "60",
                    "chrome": "67",
                    "safari": "11.1",
                },
                "useBuiltIns":"usage"//只转换已使用的模块
            }
        ]
    ],
    "plugins": []
}

babel-loader

关于babel-loader的具体配置，请查看官方文档。

webpack 4.x | babel-loader 8.x | babel 7.x

安装：npm install -D babel-loader @babel/core @babel/preset-env webpack
配置：
在webpack.config.js中：

module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,//对于第三方的插件 无需做多余处理
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            }
        ]
    }

关于@babel/preset-env的配置：请移步。
其实babel-loader只是babel和webpack沟通的桥梁，真正可以将ES6+语法转换为ES5语法的还是``@babel/preset-env。
按照上述配置，已经可以将ES6+的语法转换为ES5了。但是@babel/preset-env只是将语法翻译成ES5 ，在低版本的浏览器中，不支持的API，如Promise、map等，仍然没有被补充进去。所以我们需要使用一个工具在低版本的浏览器中补充这些新的API。
而@babel/polyfill 和 @babel/runtime正是用来做这些工作的。

@babel/polyfill

安装：npm install --save @babel/polyfill。
使用：在项目的入口文件中第一行引入即可：import "@babel/polyfill";。由于@babel/polyfill很大，所以在配合webpack使用的时候，最好在babelrc文件中添加一项配置：useBuiltIns: 'usage'。这样在打包编译的时候，就不会将为使用的ES6+语法也给打包进去了。

babel-plugin-transform-runtime

安装：具体配置请移步
npm install --save-dev @babel/plugin-transform-runtime
npm install --save @babel/runtime。
配置：
.babelrc：

{
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "absoluteRuntime": false,
        "corejs": false,
        "helpers": true,
        "regenerator": true,
        "useESModules": false,
        "version": "7.0.0-beta.0"
      }
    ]
  ]
}

@babel/polyfill 和 babel-plugin-transform-runtime的区别

• 前者的原理是当运行环境中并没有实现的一些方法，babel-polyfill会做兼容。后者是将ES6语法转换为ES5的语法，不管浏览器支不支持ES6的语法，都会编译，所以会有很多的冗余的代码。
• 前者是在全局环境一种添加方法，会造成全局变量的污染。后者它不会污染全局对象和内置对象的原型，比如说我们需要Promise，我们只需要import Promise from ‘babel-runtime/core-js/promise’即可，这样不仅避免污染全局对象，而且可以减少不必要的代码。