webpack打包转换es6_用babel-loader将ES6转换为ES5

近日，在做网站开发的项目中遇到了头疼的事儿。项目使用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库，对此，我目前还没有验证过，如果在后续项目中用到了，再回到这里补充完整。