手把手教你webpack3（5）babel-loader详细使用说明

前注：

文档全文请查看 根目录的文档说明。

如果可以，请给本项目加【Star】和【Fork】持续关注。

有疑义请点击这里，发【Issues】。

5.1、babel-loader

这个用于将使用ES6规范的js代码，转为ES5。

首先安装一大堆东西，参照下面的命令，一共是4个（包括webpack）

npm install --save babel-loader babel-core babel-preset-env webpack

创建babel规则文件.babelrc，内容设置为：

{
  "presets": [
    [
      "env",
      {
        "modules": false,
        "targets": {
          "browsers": [
            "> 1%",
            "last 2 versions",
            "not ie <= 8"
          ]
        }
      }
    ]
  ]
}

然后app.js里添加文件内容（这显然是es6语法）：

let foo = () => {
    console.log('1')
}
foo()

运行 npm run test 执行脚本，等脚本执行完毕后，查看dist文件夹下的 dist.js 文件。

会发现代码已经被成功转为非es6语法了（截取如下）：

var foo = function foo() {
  console.log('1');
};
foo();

如果想要转换这些，我们需要做一些额外的工作。

首先安装插件

npm install babel-runtime --save
npm install babel-plugin-transform-runtime --save-dev

然后修改.babelrc文件的内容为：

{
  "presets": [
    "babel-preset-env"
  ],
  "plugins": [
    "transform-runtime"
  ]
}

【注】：

babel-runtime（也就是上面plugins数组中的transform-runtime），解决了辅助代码（即让我们可以使用新特性的代码）被默认添加到每一个需要他的文件的问题（这会导致文件过大）。

具体解决方法是禁用了babel对每个文件的runtime注入，引入 babel-plugin-transform-runtime 并且使所有辅助代码从这里引用。

表现效果：假如A模块异步加载B模块，A、B模块里都使用了Set，那么为了使A模块正常运行，引入了某些代码。然后因为B模块又是被A模块引入的，那么B模块在被加载的时候，A模块里已经引入的代码，就没必要再次引入了，所以B模块里是不存在A模块引入的那些兼容代码的。

【注（完）】

修改webpack设置文件的loader内容为：

{
    test: /\.js$/,
    exclude: /node_modules/,
    loader: 'babel-loader'
}

最后修改app.js这个文件的内容，给里面加一些特殊的es6语法：

let foo = () => {
    console.log('1')
}
foo()
let bar = new Promise((resolve, reject) => {
    resolve(1)
})
bar.then(msg => console.log(msg))

let baz = new Set([1, 2, 3])
console.log(baz)

let another = async function () {
    console.time('timeout')
    let result = await new Promise((resolve, reject) => {
        console.log('in Promise')
        setTimeout(() => {
            resolve('Promise resolve')
        }, 1000)
    })
    console.log(result)
    console.timeEnd('timeEnd')
}

another()

以上代码包含es6的Promise，Set，以及es7中的async/await。

此时我们运行一下npm run test试试，然后查看dist/dist.js文件，会发现我们的代码出现在大约1040行的位置，并且原本使用es6、es7语法的代码，都被一段很长很复杂的代码所替换（因为太长，所以这里略过）。

这说明我们转义成功了！

更多请参照【实战３】解决有es6、es7语法的js代码