轻松解决 webpack 打包 ES6 语法报错

2024-01-03 16:08:07

前言

ES6 是 JavaScript 的最新版本，带来了许多新特性和语法糖，使代码更加简洁高效。然而，由于 ES6 并未被所有浏览器原生支持，因此在实际开发中，我们需要使用工具将 ES6 代码转换为 ES5 代码，以便兼容旧版本浏览器。

webpack 是一个流行的构建工具，可以将多种类型的文件（包括 ES6 代码）打包成可供浏览器运行的 JavaScript 文件。但是，默认情况下，webpack 并不能直接打包 ES6 代码。为了解决这个问题，我们需要在 webpack 中配置 babel。

什么是 Babel

Babel 是一个 JavaScript 编译器，可以将 ES6 代码转换为 ES5 代码。它支持多种 ES6 特性，包括箭头函数、类、模块等。

要在 webpack 中配置 babel，我们需要安装 babel-loader 和 @babel/core 两个包。

npm install --save-dev babel-loader @babel/core

然后，在 webpack.config.js 文件中，找到 module.rules 数组，并添加如下配置：

{
  test: /\.js$/,
  exclude: /node_modules/,
  use: {
    loader: "babel-loader",
    options: {
      presets: ["@babel/preset-env"]
    }
  }
}

其中：

test 属性指定了要使用 babel-loader 处理的文件类型。在本例中，我们将所有以 .js 结尾的文件都交给 babel-loader 处理。
exclude 属性指定了要排除的文件。在本例中，我们将 node_modules 目录下的文件排除在外。
use 属性指定了要使用的 loader。在本例中，我们使用 babel-loader。
options 属性指定了 babel-loader 的配置选项。在本例中，我们使用 @babel/preset-env 预设。