从入门到放弃：使用 webpack5 转译 js 代码

从入门到放弃：使用 webpack5 转译 js 代码

前言

在前面的文章里，我们已经可以通过 js 进行 import 各种资源。现在还有个问题，就是需要将 es6+ 代码需要转换为 es5 和添加 polyfill，来让浏览器能够识别和执行。对于这个需求，webpack5 为我们提供了丰富的支持。

使用 webpack5 进行 js 代码转译

1. 安装必要的依赖

首先，我们需要安装必要的依赖。

npm install --save-dev webpack babel-loader @babel/core @babel/preset-env

2. 配置 webpack

在 webpack 的配置文件中，我们需要添加如下配置：

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

3. 运行 webpack

在终端中，运行以下命令来编译代码：

webpack

4. 使用转译后的代码

转译后的代码将位于 dist 文件夹中。我们可以将其包含到我们的 HTML 文件中，然后就可以在浏览器中使用了。

常见错误和解决方法

1. 无法解析模块

如果您在运行 webpack 时遇到 "无法解析模块" 的错误，则可能需要安装缺少的模块。您可以使用以下命令来安装缺少的模块：

npm install --save <module-name>

2. 转译后的代码不工作

如果您发现转译后的代码在浏览器中不工作，则可能是因为您忘记添加 polyfill 了。polyfill 是用于在旧浏览器中支持新特性的库。您可以使用以下命令来安装 polyfill：

npm install --save-dev babel-polyfill

然后，您需要在您的 HTML 文件中包含 polyfill。

<script src="node_modules/babel-polyfill/dist/polyfill.min.js"></script>

3. 转译速度慢

如果您发现 webpack 的转译速度很慢，则可以尝试以下方法来提高速度：

• 使用缓存。webpack 可以使用缓存来加快转译速度。
• 使用多核处理器。webpack 可以使用多核处理器来同时转译多个文件。
• 使用增量编译。webpack 可以使用增量编译来只编译那些发生变化的文件。

结语

webpack5 为我们提供了丰富且强大的 js 代码转译支持。通过使用 webpack5，我们可以轻松地将 es6+ 代码转换为 es5 代码，并添加 polyfill，以便在浏览器中运行。