babel实战

babel就是把ES6的javascript转成ES5的javascript，让浏览器不懵逼。

小试babel刀

把babel装上，@babel/core是核心组件，@babel/cli是客户端，让我们可以直接执行npx babel命令

$ node -v
v18.18.2
$ npm init -y # 初始化本目录为一个node项目
$ npm install -D @babel/core @babel/cli # 版本@babel/cli:7.23.0, @babel/core:7.23.3
$ npx babel --version
7.23.0 (@babel/core 7.23.3)

写个src/index.js文件，试试能不能转：

// ES6 array function
var fn = (num) => num + 2;
console.log(fn(1));

转一下试试，babel后面跟一个源文件，就会把这个文件的转换结果输出到屏幕：

$ npx babel src/index.js
// ES6 array function
var fn = num => num + 2;
console.log(fn(1));

怎么没什么效果啊？ES6的箭头函数没有转成ES5啊，为什么？

原来@babel/core本身不具备转换功能，需要使用插件来实现对应功能。那我们把插件装上：

$ npm install -D @babel/plugin-transform-arrow-functions # 版本7.23.3

再转一下试试：

$ npx --no-install babel src/index.js --plugins @babel/plugin-transform-arrow-functions # --no-install是npx参数，让npx不去远程下载babel，带不带都行
// ES6 array function
var fn = function (num) {
  return num + 2;
};
console.log(fn(1));

成了！babel完成了转换！

使用配置文件

上面的命令太长，参数多了就写不下了。用个配置文件就可以解决。

babel常用的配置文件有.babelrc、.babelrc.js、babel.config.js，我们在项目目录里写个.babelrc试试：

{
  "plugins": ["@babel/plugin-transform-arrow-functions"]
}

然后执行转换命令，这次不带这么长参数了：

$ npx --no-install babel src/index.js
// ES6 array function
var fn = function (num) {
  return num + 2;
};
console.log(fn(1));

也执行成功了，说明babel默认使用了我们的配置文件。

来个套餐

上个例子我们使用了一个插件，如果转换的东西很多，难道要配置很多插件（babel官方可是有上百个插件）？

不用！babel官方给我们定制了一系列“插件套餐”：preset，我们只要使用特定的"preset"，就可以用特定的插件套餐。

@babel/preset-env就是一个预制套餐，它可以智能的进行javascript转换：

$ npm install -D @babel/preset-env # 版本7.23.3

修改一下.babelrc配置文件（也可以简写成"@babel/env"）：

{
  "presets": ["@babel/preset-env"]
}

执行转换试一试：

$ npx --no-install babel src/index.js
"use strict";

// ES6 array function
var fn = function fn(num) {
  return num + 2;
};
console.log(fn(1));

成了！

@babel/preset-env还可以添加一些参数。我们再改下.babelrc配置文件：

{
  "presets": [
    ["@babel/env", {"targets": "last 2 Chrome versions"}]
  ]
}

这次指定了浏览器版本：支持最新的2个chrome版本。再执行下试试：

$ npx babel src/index.js
"use strict";

// ES6 array function
var fn = num => num + 2;
console.log(fn(1));

结果只在第一行添加了一个"use strict";，其它没变，因为Chrome浏览器支持=>符号语法。

说明：安装@babel/preset-env时，好像会自动安装@babel/plugin-transform-arrow-functions。

和webpack结合

$ npm install -D webpack # 版本5.89.0
$ npm install -D webpack-cli # 版本5.1.4
$ npx webpack --mode development ./src/index.js # 注意webpack5命令和webpack3不一样：需要用--mode指定模式；源文件用./src/index.js指定相对于当前目录，如果不指定./则在node_modules里找；目标文件默认为./dist/main.js
asset main.js 1.27 KiB [emitted] (name: main)
./src/index.js 72 bytes [built] [code generated]
webpack 5.89.0 compiled successfully in 114 ms

这里我们直接使用npx执行webpack命令，注意webpack5的命令和webpack3有较大区别。检查生成的./dist/main.js，可以看到：

eval("... var fn = (num) => num + 2;\r\nconsole.log(fn(1)); ... "); // 使用...省略了一些内容

打包生成的代码中，依旧使用=>函数。

现在我们装上babel-loader：

$ npm install -D babel-loader # 版本9.1.3

然后再配置webpack.config.js，这个配置指定webpack使用./src/index.js作为入口，对于所有.js文件，都会使用babel-loader进行处理。而babel-loader的作用，就是使用@babel相关包，对这些文件进行处理，例如把ES6转成ES5：

module.exports = {
  entry: __dirname + "/src/index.js",
  // 处理模块
  module: {
    rules: [
      { // 对于js文件，使用babel-loader进行处理
        test: /\.js$/i,
        use: ['babel-loader']
      }
    ]
  }
}

因为babel会默认使用.babelrc作为其配置文件，所以还要确认下.babelrc中的配置，确定下使用了@bebel/env：

{
  "presets": ["@babel/env"]
}

现在执行下webpack命令：

$ npx webpack --mode development
asset main.js 1.28 KiB [emitted] (name: main)
./src/index.js 90 bytes [built] [code generated]
webpack 5.89.0 compiled successfully in 1107 ms

再查看./dist/main.js：

eval("... var fn = function fn(num) {\n  return num + 2;\n};\nconsole.log(fn(1)); ..."); // 省略了一些内容

可以看到babel起作用了，把=>函数转成了普通函数，和我们在前面测试的效果一致。

整合到node项目中

经过前面的分析，把babel和webpack结合起来，整合到node项目中就比较简单了：就是把我们在控制台执行的命令行，都写到node项目的package.json的scripts里。

首先修改下webpack.config.js文件，把mode加上：

module.exports = {
  mode: "development",
  entry: __dirname + "/src/index.js",
  // 处理模块
  module: {
    rules: [
      { // 对于js文件，使用babel-loader进行处理
        test: /\.js$/i,
        use: ['babel-loader']
      }
    ]
  }
}

然后修改下package.json文件，把scripts加上：

{
  ...
  "scripts": {
    "build": "webpack"
  },
  ...
}

然后执行：

$ npm run build

> my-mall-admin-web-02@1.0.0 build
> webpack

asset main.js 1.28 KiB [emitted] (name: main)
./src/index.js 90 bytes [built] [code generated]
webpack 5.89.0 compiled successfully in 1075 ms

执行效果和之前一样。

源码

笔记本：E:\pro\web\231008-mall\dev\my-mall-admin-web-02

参考资料

• 一文彻底读懂Babel ，本文主要参考这个资料
• Babel入门教程 ，实战性质较强
• Babel官网-Usage Guide
• Babel官网中文网站
• webpack command line interface ，webpack命令