返回

webpack 中引入 Babel 7 指南

前端

导言

webpack 是一个流行的模块打包工具，可将 JavaScript、CSS 和其他资源打包成浏览器可用的文件。Babel 7 是一款出色的 JavaScript 转译器，可将新语法转译成更旧的 JavaScript，从而实现跨浏览器兼容性。将 Babel 7 集成到 webpack 中可以极大地提高 JavaScript 开发效率，并确保您的代码在各种环境中都能够运行。

安装

首先，安装 webpack 和 Babel 7 及其必需的依赖项：

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

配置

接下来，在 webpack 配置文件中（通常是 webpack.config.js）添加 Babel-loader：

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

在上面的配置中：

  • test: /\.js$/ 匹配所有 JavaScript 文件。
  • exclude: /node_modules/ 排除 node_modules 目录中的文件，因为它们通常已经转换过了。
  • loader: 'babel-loader' 指定要使用的 Babel-loader。
  • presets: ['@babel/preset-env'] 指定要使用的 Babel 预设，它包含了一组通用的转换规则，以支持大多数现代浏览器。

使用

完成配置后，您就可以在 JavaScript 代码中使用 Babel 7 特性：

// ES2020 语法
const foo = 10 ** 2;

Babel 7 会自动将代码转译成兼容的 ES5 语法：

// ES5 语法
const foo = Math.pow(10, 2);

自定义配置

如果您需要进一步自定义 Babel 7 的行为，可以创建 .babelrc 文件（通常位于项目根目录）并指定所需的选项：

{
  "presets": ["@babel/preset-env"],
  "plugins": ["@babel/plugin-transform-runtime"]
}

结论

将 Babel 7 集成到 webpack 中是一个简单的过程，可以为您提供 JavaScript 开发的强大优势。通过利用 Babel 7 的转译能力，您可以使用最新的语法并确保您的代码在广泛的浏览器环境中都能正常运行。