1 概述

babel是转码器，用于将es6、es7或更高版本的代码转换为es5的代码。提升代码在浏览器中的兼容性。

2 配置

1. 编写示例代码

新增es6代码:

import './bbb.js'
console.log("aaaa js maomao")

require("./index.styl")

let fn = () => {
    console.log("test es6")
}
fn()
console.log(fn)

这里新增了一个箭头函数，然后打印函数，可以在运行结果日志里查看最终代码是否被转化成普通的js函数。

2. 配置babel

1. 安装：

npm i babel-loader @babel/core @babel/runtime @babel/preset-env @babel/plugin-proposal-class-properties @babel/plugin-transform-runtime -D

2.新增.babelrc文件(根目录下)，配置参数：

{
    "presets": [
        "@babel/preset-env"
    ],
    "plugins": [
        "@babel/plugin-transform-runtime",
        "@babel/plugin-proposal-class-properties"
    ]
}

3. 新增webpack配置：

module.exports = {
  module: {//模块
    rules: [//规则，多个loader
      {
        test: /\.js$/,
        use: {
          //用 babel-loader 把es6转es5
          loader: "babel-loader",
        }
      }
    ]
  }
}

4. 查看结果

运行：

npm run dev

查看日志输出：

ƒ fn() {
  console.log("test es6");
}

发现fn箭头函数已经被转化为普通函数。