6. .babelrc配置 Babel 编译器

.babelrc 是一个配置文件，专门用于配置 Babel 编译器的行为。Babel 是一个流行的 JavaScript 编译工具，用于将现代 JavaScript 代码（如 ES6+、JSX 等）转换为兼容较旧浏览器和环境的代码。.babelrc 文件通常包含在项目根目录中，用来设置 Babel 的各种选项和插件。

1. .babelrc 文件的作用

.babelrc 文件的主要作用是：

• 配置 Babel 的预设（presets）和插件（plugins），以便将现代 JavaScript 代码转译成更广泛支持的旧版本代码。
• 确定转换的代码类型和目标环境。
• 管理 Babel 的转换选项，从而自定义如何对代码进行转译。

2. .babelrc 文件的格式

.babelrc 文件是一个 JSON 格式的文件，通常包含三大部分：

• presets：一个数组，列出用于转换代码的 Babel 预设（例如，ES6 转换为 ES5）。
• plugins：一个数组，列出用于扩展 Babel 功能的插件（例如，处理 JSX 或 TypeScript）。
• env（可选）：指定不同环境下的配置，以便根据不同的构建环境调整配置。

3. .babelrc 文件常用配置

1. presets

Babel 使用预设（presets）来处理不同版本的 JavaScript。每个预设包含一组规则和插件，帮助 Babel 知道如何转换代码。

常见的预设有：

• @babel/preset-env：用于根据目标环境将 ES6+ 代码转换为兼容的 ES5 代码。
• @babel/preset-react：用于将 JSX 转换为普通的 JavaScript 代码。
• @babel/preset-typescript：用于将 TypeScript 转换为 JavaScript 代码。

示例：

{
  "presets": [
    "@babel/preset-env",    // 转换为 ES5
    "@babel/preset-react"   // 转换 JSX
  ]
}

2. plugins

Babel 插件（plugins）提供了更多的定制化功能，除了转换 JavaScript 语法外，还可以用于添加各种转换特性，比如语法扩展、实验特性等。

常见的插件有：

• @babel/plugin-transform-runtime：用于优化代码和减少打包体积，尤其是对于生成的 helper 函数。
• @babel/plugin-proposal-class-properties：用于支持类属性（Class Properties）语法。
• @babel/plugin-syntax-dynamic-import：用于支持 import() 动态导入。

示例：

{
  "plugins": [
    "@babel/plugin-transform-runtime",
    "@babel/plugin-proposal-class-properties"
  ]
}

3. env

Babel 提供了 env 配置选项，可以根据不同的环境（例如，开发、生产）指定不同的配置。你可以为每个环境定义不同的 presets 和 plugins。

示例：

{
  "presets": [
    ["@babel/preset-env", {
      "targets": "> 0.25%, not dead"  // 目标浏览器
    }]
  ],
  "env": {
    "production": {
      "plugins": ["@babel/plugin-transform-runtime"]
    },
    "development": {
      "plugins": ["react-refresh/babel"]  // 开发环境中的 React Fast Refresh
    }
  }
}

在 env 中，你可以为不同的环境（如 production、development）配置不同的插件和预设。

4. ignore 和 only

• ignore：用于忽略不需要转换的文件或目录。
• only：指定只对特定的文件或目录进行转换。

示例：

{
  "ignore": ["node_modules/**"],
  "only": ["src/**/*"]
}

4. 完整的 .babelrc 示例

下面是一个常见的 .babelrc 配置文件，它同时支持转换现代 JavaScript、JSX 和 TypeScript：

{
  "presets": [
    "@babel/preset-env",        // 转换为 ES5，兼容目标浏览器
    "@babel/preset-react",      // 转换 JSX
    "@babel/preset-typescript"  // 转换 TypeScript
  ],
  "plugins": [
    "@babel/plugin-transform-runtime", // 减少冗余代码
    "@babel/plugin-proposal-class-properties", // 支持类属性
    "@babel/plugin-syntax-dynamic-import"  // 支持动态导入
  ],
  "env": {
    "production": {
      "plugins": ["@babel/plugin-transform-runtime"]
    },
    "development": {
      "plugins": ["react-refresh/babel"]
    }
  }
}

5. .babelrc 与 babel.config.js 的区别

除了 .babelrc，还有 babel.config.js 文件用于配置 Babel，它的作用和 .babelrc 类似，但有一些不同点：

• .babelrc：每个子目录都有自己的配置，适用于局部配置。例如，你可能在某些子目录中需要不同的 Babel 配置。
• babel.config.js：是全局配置文件，适用于整个项目，尤其在 monorepo 或大型项目中，它能统一管理整个项目的 Babel 配置。

babel.config.js 示例：

module.exports = {
  presets: [
    '@babel/preset-env',
    '@babel/preset-react'
  ],
  plugins: [
    '@babel/plugin-transform-runtime'
  ]
};

6. 配置 .babelrc 的最佳实践

• 根据环境配置：通过 env 字段为不同的环境（如开发、生产）配置不同的插件和预设，以便获得更好的性能和优化。
• 使用 @babel/preset-env：它可以根据目标环境自动选择需要的插件和转换规则，避免手动维护转换规则。
• 插件与预设组合使用：确保在项目中合理配置插件和预设，以便获得最佳的转换效果和代码优化。
• 避免冗余：不需要的插件和预设应当从 .babelrc 中移除，以减少编译时的负担和打包后的体积。

7. 总结

.babelrc 文件是 Babel 配置的重要组成部分，它允许开发者根据项目需求配置 JavaScript 代码的转换规则。通过配置 presets 和 plugins，你可以将现代 JavaScript 转换为兼容性更好的代码，并根据不同的环境配置不同的转换选项。Babel 的灵活性和配置选项让开发者能够在不同的项目和环境中灵活地应用转换规则，确保代码在各种浏览器和平台上的兼容性。