在 Webpack 开发中 Babel 的配置技巧-JavaScript中文网-JavaScript教程资源分享门户

在 Webpack 开发中 Babel 的配置技巧

随着前端技术的快速发展，我们需要使用更多的新特性并且需要兼容各个浏览器，这时候 Babel 就能帮助我们解决这些问题。Babel 是一个 JavaScript 编译器，它将新特性的 JavaScript 语法转换成可运行的旧浏览器版本的代码。在 Webpack 开发中，Babel 的配置技巧十分重要，本文将介绍一些 Babel 常用的配置技巧并给出示例代码。

Babel 的安装和配置

我们首先需要安装 Babel，打开终端输入以下命令：

npm install babel-loader @babel/core @babel/preset-env

然后我们需要在 Webpack 配置文件中添加 Babel 配置：

// www.javascriptcn.com code example
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
};

这里的配置信息包括了 Babel 和 Webpack，我们可以看到我们通过使用 babel-loader 来告诉 Webpack 该如何转换我们的代码。options 内部的 presets 指定了使用哪些 Babel 插件来将 ES6+ 代码转换成 ES5 代码。

Babel 插件

preset-env 是一个包含了 Babel 插件的 preset，它可以根据我们的目标浏览器或运行环境来自动决定插件。通常我们需要根据目标浏览器或运行环境手动添加插件，Babel 提供了一种简单易用的方式 - plugins 配置。

例如我们现在想在代码中使用 Promise，但是 ES5 并不支持 Promise。我们需要使用 @babel/plugin-transform-runtime 插件来实现 Promise 的转换。我们需要先通过 npm 安装 @babel/runtime:

npm install @babel/runtime

然后安装 @babel/plugin-transform-runtime:

npm install @babel/plugin-transform-runtime

最后在 Babel 配置中添加以下配置：

// www.javascriptcn.com code example
module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        targets: {
          edge: '17',
          firefox: '60',
          chrome: '67',
          safari: '11.1'
        }
      }
    ]
  ],
  plugins: [
    [
      '@babel/plugin-transform-runtime',
      {
        absoluteRuntime: false,
        corejs: false,
        helpers: true,
        regenerator: true,
        useESModules: false
      }
    ]
  ]
};

这里我们启用了 @babel/plugin-transform-runtime 插件，并为其配置了一些参数。其中不能缺少的是 helpers 和 regenerator 这两个参数，这两个参数将使得 Babel 使用 helper 函数和 regenerator runtime 来转换我们的代码。

Babel 缓存

Babel 转换的过程会消耗一定的时间，特别是当你的项目变得越来越大时。开启 Babel 缓存可以让我们无需重新编译已经编译过的文件，从而节省开发时间。我们可以通过设置 babel-loader 的 cacheDirectory 选项来启用缓存：

// www.javascriptcn.com code example
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            cacheDirectory: true,
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
};

这样一来，Babel 会在 node_modules/.cache/babel-loader 目录中缓存编译后的文件，下一次编译时就可以直接使用缓存，从而提高编译速度。

结语

本文介绍了在 Webpack 开发中 Babel 的常见配置技巧，相信这些技巧对于初学者和有经验的开发者都有指导意义。当然，这些技巧只是冰山一角，Babel 还有很多功能等待我们去发掘和应用。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d6b604a941bf7134c8f627

在 Webpack 开发中 Babel 的配置技巧

接着读