参考了《在webpack配置babel转换es6，兼容ie11，在webpack中使用babel-preset，babel-polyfill》这篇文章。
近日，在做网站开发的项目中遇到了头疼的事儿。项目使用js开发，用webpack打包编译，js使用了ES6的语法。其结果是网站在FireFox、Chrome这些浏览器上都没有问题，但是在IE11浏览器中，有的代码会报错。这就意味着，某些ES6的语法太新了，IE11不认啊（从另一方面说，IE11确实太落后了）。
解决的办法就是将ES6的语法转化为ES5的语法。
步骤如下：
- 安装
babel-loader和@babel/core核心库：
yarn add babel-loader @babel/core -D
- 在
webpack配置文件中配置babel：
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader"
}
]
}
这些代码是说：在编译js文件时，使用babel-loader加载器，但是编译的文件中不包含node_modules文件夹下的第三方库。
目前，我们只是将webpack与babel联系到一起了，但是应该怎样编译这些js文件，babel还不知道，因此就有了下面这步。
- 安装
@babel/preset-env插件，用它来转ES6语法：
yarn add @babel/preset-env -D
- 修改之前第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库，对此，我目前还没有验证过，如果在后续项目中用到了，再回到这里补充完整。
