手把手教你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();

---

但是，这个只能转一些普通的es6语法，像例如Promise、Set之类的，他是无法转换的。

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

首先安装插件

npm install babel-runtime --savenpm 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代码