Webpack 4.x 环境下 Babel 的安装、配置与使用详解

前言

前言

当前，ES6（即 ES2015）语法已在项目中得到广泛应用，其具备代码更简洁、功能更强大的优势。然而，浏览器对 ES6 语法的支持尚不完善。为确保兼容性，需借助转换工具将 ES6 代码转换为 ES5。Babel 是目前最主流的工具之一。本文将探讨如何在 Webpack 中集成并使用 Babel。

撰写本文旨在应对 Webpack 最新版本操作方式的变更以及 Babel 的持续更新，使得过往教程不再适用。笔者基于 Webpack 4.1.1 版本对 Babel 的使用进行了探索，以下内容均经过测试验证可行，供读者参考配置。

文章用例

为清晰阐述，本文采用以下案例结构：

1. 项目根目录命名为 webpack-test（名称可自定义）；

2. 根目录下包含 index.js 文件，其代码如下：

3. index.js 引入的 a.js 文件使用了 ES6 箭头函数语法，代码如下：

4. 最终打包生成 dist 目录下的 main.js，且 dist 目录下有 index.html 引入该脚本，index.html 内容如下：

安装依赖包

一、安装 babel-loader、babel-core、babel-preset-env

这三个包均为必需，但各自功能不同。

首先，babel-loader 作为 Webpack 的 loader，其作用与其他 loader 一致，即处理特定类型的文件。Webpack 官方文档指出：

loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack的打包能力，对它们进行处理。

尽管 Webpack 本身能处理 .js 文件，但无法转换 ES2015+ 语法。babel-loader 的作用正是处理使用了 ES2015+ 语法的 .js 文件。

使用 Babel 前，需先安装 babel-loader。在命令行中定位至项目根目录，执行以下命令安装：

npm install -D babel-loader

笔者安装后显示的版本为 babel-loader@7.1.4。

其次，babel-core 提供一系列 API。当 Webpack 通过 babel-loader 处理文件时，babel-loader 实际调用的是 babel-core 的 API，因此必须安装 babel-core：

npm install -D babel-core

笔者安装后显示的版本为 babel-core@6.26.0。

第三，babel-preset-env的功能是指示babel采用何种转码规范处理文件。尽管babel存在多种可转换ES6语法的规范，例如babel-preset-es2015、babel-preset-latest、babel-preset-env，但官方目前推荐应用babel-preset-env，本文亦选用babel-preset-env，读者可查阅官网知晓各规范差异。同样在命令行中定位到项目根目录，输入以下指令进行安装：

npm install -D babel-preset-env

笔者安装的版本为 babel-preset-env@1.6.1。

配置 Babel 规则

二、配置 Babel 规则

仅安装上述三个包尚不足以使 Babel 生效，还需配置 Babel 规则。

第一种方式是通过 package.json 配置。在 package.json 文件中添加 “babel” 属性，该属性为 JSON 对象，用于设置项目的 Babel 转码规则及插件，基本格式如下：

"babel":{
 "presets": [],
 "plugins": []
}

“presets” 属性字段设定转码规则，“plugins” 属性设置使用的插件。本项目只需将 “babel” 属性的 “presets” 设置为 [“env”]，如下所示：

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

上述设置告知 npm 本项目使用 Babel，并采用 babel-preset-env 规则进行转码，即实现 ES2015+ 语法的转换。

此外，还有第二种方式，即通过 .babelrc 文件。在项目根目录下新建 .babelrc 文件，内容只需包含第一种方式中 “babel” 属性的值即可：

{
 "presets": ["env"]
}

其作用与第一种方式相同。

配置 Webpack 配置文件

三、建立并配置 webpack.config.js 文件

仅有上述配置仍无法生效，因为 Webpack 尚不知晓何时应用该规则，因此需要使用 webpack.config.js 文件。

该文件用于配置 Webpack 打包参数。在笔者关于 Webpack 4.x 的第一篇文章《webpack4.x开发环境配置》中曾提及，Webpack 4.x 中 webpack.config.js 并非必需，但若需进行个性化打包配置，仍需使用该文件。在根目录下新建 webpack.config.js 文件，内容如下：

module.exports={
  module:{
    rules:[
      {
        test: /\.js$/,
         exclude: /node_modules/, 
         loader: "babel-loader"
      }
    ]
  }

}

此配置告知 Webpack 在打包时，一旦匹配到 .js 文件便使用 babel-loader 处理。如前所述，babel-loader 会调用 babel-core 的 API，并依据 babel-preset-env 规则进行转码。此处未使用 entry、output 等参数，因为 Webpack 4.x 默认提供了入口和出口，本项目无需更改，故无需设置。

运行与结果验证

四、运行查看结果

假设你已在 package.json 文件的 “scripts” 属性下增加了 “build” 属性，即

"build": "webpack --mode production --progress --display-modules --colors --display-reasons"

现在，在命令行定位至项目根目录，执行

npm run build

这相当于执行 “build” 属性对应的脚本。

随后，Webpack 开始打包。打包完成后，用浏览器打开 dist 目录下的 index.html 查看结果，可发现弹出两次弹窗

第一次显示 “hello world”，第二次显示 “2,3,4”。

这表明 a.js 中的 arrowTest() 函数执行成功。打开 main.js 查看打包后的代码，可见箭头函数部分已转换为 ES5 语法，如下：

[1,2,3].map(function(r){return r+1})

这表明整个 Babel 的配置及使用已成功。

当然，以上仅为最基本的配置和使用。若要应对更复杂的情况，只需参照官方文档修改相关参数即可，这并非难事，完！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。