模块构建失败: BrowserslistError:未知的浏览器查询`adad`

基础概念

Browserslist 是一个用于指定项目支持的浏览器版本范围的工具。它被广泛用于前端构建工具（如 Babel、Autoprefixer）中，以确保代码在这些指定的浏览器中能够正常运行。Browserslist 通过查询语句来定义目标浏览器范围。

相关优势

1. 兼容性保证：确保代码在指定的浏览器中都能正常运行。
2. 自动化处理：自动添加浏览器前缀、转译现代 JavaScript 代码等。
3. 统一标准：团队成员可以共享相同的浏览器支持策略。

类型与应用场景

类型：

• 简单查询：如 last 2 versions、> 1%。
• 复杂查询：结合多个条件，如 not dead、iOS >= 10。

应用场景：

• 前端项目：确保代码在不同浏览器中的一致性。
• 库和框架：定义支持的浏览器范围，以便用户了解兼容性。

问题原因

模块构建失败的原因是因为 Browserslist 遇到了一个未知的浏览器查询 adad。这通常是由于配置文件中的错误或拼写错误导致的。

解决方法

1. 检查配置文件： 打开项目的 package.json 文件或 .browserslistrc 文件，查找是否有 adad 这样的无效查询。
2. 检查配置文件： 打开项目的 package.json 文件或 .browserslistrc 文件，查找是否有 adad 这样的无效查询。
3. 修正无效查询： 删除或替换掉无效的查询。
4. 修正无效查询： 删除或替换掉无效的查询。
5. 使用有效查询： 如果需要指定特定的浏览器版本，可以使用有效的 Browserslist 查询。
6. 使用有效查询： 如果需要指定特定的浏览器版本，可以使用有效的 Browserslist 查询。

示例代码

假设你在 package.json 中配置了 Browserslist，但遇到了错误：

{
  "name": "my-project",
  "version": "1.0.0",
  "browserslist": [
    "> 0.2%",
    "not dead",
    "adad"  // 这里有一个错误
  ]
}

修正后的配置应该是：

{
  "name": "my-project",
  "version": "1.0.0",
  "browserslist": [
    "> 0.2%",
    "not dead"
  ]
}

通过这种方式，你可以确保 Browserslist 配置正确，避免构建失败的问题。