掌握 Babel 配置：项目范围与文件相关配置全解析(2)

王解

于 2024-12-04 09:45:00 发布

阅读量697

点赞数 7

分类专栏： # Babel JS工具链文章标签：前端 javascript Babel

本文链接：https://blog.csdn.net/weixin_53961451/article/details/144174398

版权

22 篇文章

订阅专栏

7 篇文章

订阅专栏

Babel 的配置文件用于指定编译选项，包括使用的插件、预设、目标浏览器等。配置文件可以分为项目范围的配置文件和文件相关的配置文件。

项目范围配置文件

这些配置文件通常放在项目的根目录下，并对整个项目生效。

文件相关配置文件

这些配置文件对特定的文件或目录及其子目录生效。

假设有一个项目结构如下：

/my-project
|-- frontend
|   |-- .babelrc.json
|   |-- src
|-- backend
|   |-- .babelrc.json
|   |-- src
|-- babel.config.json

Babel 支持多种配置项，官方文档详细列出了所有选项。以下是一些常见的配置项：

plugins: 配置要使用的插件，值为一个数组，可以配置多个插件。

{
  "plugins": [
    ["@babel/plugin-transform-arrow-functions", {}]
  ]
}

presets: 配置要使用的预设，值为一个数组，可以配置多个预设。
```
{
  "presets": [
    "@babel/preset-env"
  ]
}
```

targets: 指定要兼容的浏览器版本范围。
```
{
  "targets": "> 0.25%, not dead"
}
```
浏览器范围的指定方式有多种，例如在项目根目录下创建 .browserslistrc 文件或在 package.json 中通过 browserslist 键来指定。优先级顺序如下：
1. targets
2. .browserslistrc
3. package.json

browserlistConfigFile: 默认值是 true，表示允许 Babel 去搜寻项目中的 .browserslistrc 或 package.json 中的 browserslist 配置。也可以指定具体的路径。

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "browserslistConfigFile": "./.browserslistrc"
      }
    ]
  ]
}

extends: 扩展其他 Babel 配置文件，可以提供一个路径。
```
{
  "extends": "./base.babelrc.json"
}
```

env: 为不同的环境提供不同的配置。

{
  "env": {
    "development": {
      "plugins": ["pluginA"]
    },
    "production": {
      "plugins": ["pluginB"]
    }
  }
}

overrides: 对匹配上的特定文件或目录应用不同的配置。

{
  "overrides": [
    {
      "test": ["*.ts", "*.tsx"],
      "exclude": "node_modules",
      "presets": ["@babel/preset-typescript"]
    }
  ]
}

ignore 和 only: 控制忽略文件和指定特有文件。

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

sourceMaps: 是否生成 source map。
```
{
  "sourceMaps": true
}
```
sourceFileName: 指定 source map 文件的文件名。
```
{
  "sourceFileName": "customFileName.js"
}
```

sourceRoot: source map 文件对应的 URL 前缀。

{
  "sourceMaps": true,
  "sourceRoot": "/root/path/to/source/files/"
}

sourceType: 指定 Babel 如何解析 JS 代码。
- "module": 如果你的代码使用 ESM 模块化（涉及 export 和 import）。
- "script": 普通的 JS 脚本，没有使用模块化。
- "unambiguous": 让 Babel 自己判断，如果代码使用了 export 和 import，则视为模块文件，否则视为普通的脚本文件。
assumptions: 从 Babel 7.13.0 开始引入的一项配置项，让开发者对自己的代码做一个假定（更像是对 Babel 的一个承诺）。
```
{
  "assumptions": {
    "noClassCalls": true
  }
}
```
上面的配置表示代码中不会直接调用类（不会像调用函数一样去调用类），Babel 可以省略生成检查类是否被正确调用的代码。