es6 转 es5

在 webpack 中将 es6 语法转化成 es5 语法需要通过 babel 来实现。

案例

/** ./src/index.js **/
class Animal {
    constructor(type){
        this.type = type;
    }
    getType(){
        return this.type;
    }
}
const pig = new Animal('猪');
console.log(pig.type);

直接打包产生文件如下：

我们会发现 es6 的 class 语法会被原封不动的打包过来，并不会转化成 es5。
下面我们来使用 babel 转化。

需要用到的 babel 包

转换 es5 需要用到 babel-loader，@babel/core，@babel/preset-env。
这三个包在执行时内部调用顺序如下：
webpack => babel-loader => @babel/core => @babel/preset-env。
语法的转化就存放在 @babel/preset-env 预设中。

安装依赖

yarn add babel-loader @babel/core @babel/preset-env

webpack 配置

/** ./webpack.config.js **/
let path = require('path');
//...
module.exports = {
  module: {
    rules: [
      //....
      {
        test: /\.js$/,
        exclude: /node_modules/, //排除不需要转化的路径
        include: path.resolve(__dirname, './src'), //指定需要转化的路径
        use: [{
          loader: 'babel-loader',
          options: {
            presets:['@babel/preset-env']
          }
        }]
      }
      //...
    ]
  }
}
//...

打包结果

配置完 webpack 之后，我们再进行打包，结果如下：

我们会发现 es6 的 class 语法已经转化成 es5 了。