用babel-loader将ES6转换为ES5

参考了《在webpack配置babel转换es6，兼容ie11，在webpack中使用babel-preset，babel-polyfill》这篇文章。

近日，在做网站开发的项目中遇到了头疼的事儿。项目使用js开发，用webpack打包编译，js使用了ES6的语法。其结果是网站在FireFox、Chrome这些浏览器上都没有问题，但是在IE11浏览器中，有的代码会报错。这就意味着，某些ES6的语法太新了，IE11不认啊（从另一方面说，IE11确实太落后了）。

解决的办法就是将ES6的语法转化为ES5的语法。

步骤如下：

1. 安装babel-loader和@babel/core核心库：

yarn add babel-loader @babel/core -D

2. 在webpack配置文件中配置babel：

module: {
  rules: [
    { 
        test: /\.js$/, 
        exclude: /node_modules/, 
        loader: "babel-loader" 
    }
  ]
}

这些代码是说：在编译js文件时，使用babel-loader加载器，但是编译的文件中不包含node_modules文件夹下的第三方库。

目前，我们只是将webpack与babel联系到一起了，但是应该怎样编译这些js文件，babel还不知道，因此就有了下面这步。

3. 安装@babel/preset-env插件，用它来转ES6语法：

yarn add @babel/preset-env -D

4. 修改之前第2步的配置，添加ES6语法转ES5语法的功能：

    module: {
      rules: [
        { 
            test: /\.js$/, 
            exclude: /node_modules/, 
            loader: "babel-loader" 
            options:{
                presets: ["@babel/preset-env"]
            }
        }
      ]
    }

4.1 也可以更优雅一些，不把第4步的配置项写到第2步的配置项中。做法是在项目的根目录下新建一个.babelrc文件，内容如下：

{
    "presets": ["@babel/preset-env"]
}

这样，配置项还是用第2步的，不用更改。项目在编译的时候，会自动找到这个.babelrc文件，并加载里边的配置项。这种方式更灵活，代码量少，阅读的时候清楚，只是要注意，要用json文件的那种双引号的写法。

至此，将ES6的语法转化为ES5的语法就配置完成了，比如它会将const，let转为var，将箭头函数转为function等等。项目在IE11中也不报错了。

但是我的项目中并没有使用到promise或weakmap等新的语法，按照开头参考文章中所介绍的，对于这些语法，还应该使用@babel/polyfill库，对此，我目前还没有验证过，如果在后续项目中用到了，再回到这里补充完整。