前言

完成了html，js，css的加载，接下来就需要针对es6等浏览器兼容性问题做处理了。

babel介绍

现在js的新语法越来越多，但是有些浏览器版本目前可能无法识别es5以上的语法，也就是说，ES2015-2010(ES6-ES11) 的识别不了，那这当然是不行的了，得兼容，兼容就用到了babel，先简单介绍一下babel：根据官网的介绍：Babel 是一个工具链，主要用于在当前和旧的浏览器或环境中，将 ECMAScript 2015+ 代码转换为 JavaScript 向后兼容版本的代码，其主要作用是：

转换语法
Polyfill 目标环境中缺少的功能（通过如 core-js 的第三方 polyfill）
源代码转换(codemods)
等等。。。

@babel/core

babel的核心包，主要是处理代码的解析、转义、产生，具体需要转移到什么版本的js，需要用户自行定义，这也就需要其他的babel包或者插件，需要在options属性中指定。

@babel/cli

是一个允许你在终端使用babel的工具，提供cli命令行工具，用来通过命令行编译文件。

@babel/preset-env

是一个智能预设，它允许您使用最新的JavaScript，而无需管理目标环境需要哪些语法转换，也就是说，这个包可以用来定义转义后的js版本，根据宿主环境版本预设编译生成的代码的版本。那么，是如何确定的这个宿主版本呢？ babel是运用的browerlist来设置默认宿主环境版本的。如果想编译出指定某个宿主环境的代码，除了在可以在.browserslistrc文件里配置，还可以设置参数里的targets配置

@babel/plugin-transform-runtime

在自己写框架或者库的时候，使用babel-plugin-transform-runtime是个很好的选择，主要是不污染环境
以上包在webpack中使用，需要加载babel-loader。

babel配置

安装依赖

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

webpack.config.js配置：

{
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/, // 防止转换 node_modules 和 bower_components 的代码，包管理下载下来的代码是不需要转换的
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"]
          }
        }
      }

如果需要额外添加某些插件，可以在options下增加plugins属性，这个属性可以更灵活的配置js转义规则，从而扩展代码的转译功能。presets是plugins的集合。

参考资料

babel官网 webpack5的使用

前端工程化项目搭建五：浏览器兼容

前言