browserslisterror 包含带有浏览器的 .browserslistrc 和 package.json - JavaScript

当使用某些库或框架时，可能会遇到类似以下错误信息：

BrowserslistError: /path/to/project/.browserslistrc contains"IE 11" without IE 10 global usage, /path/to/project/package.json contains"not IE < 12"that doesn't support ES6, /path/to/project/.browserslistrc contains unknown browser "chrome 49".

这是由于在项目的 .browserslistrc 或 package.json 文件中指定了不受支持的浏览器或版本。我们需要针对该错误进行调试和解决。

.browserslistrc 文件

.browserslistrc 文件是一个在项目根目录下定义浏览器目标支持级别的配置文件。它的格式很简单：每行一个浏览器/版本或指定所需特性的关键字。

例如，以下是一个 .browserslistrc 文件：

last 2 versions
> 5%
ie 11

它指定了支持最新的2个浏览器版本、全球使用率超过5%的浏览器以及 IE 11 浏览器。

如果需要对它进行修改，我们需要确认以下几个问题：

1. 是否存在不支持的浏览器或版本？
2. 是否使用了不受支持的特性？
3. 是否合理地指定了支持浏览器的版本？

package.json 文件

package.json 文件中可能有一些库依赖于特定浏览器版本或需要使用的特性级别。

例如，对于以下代码：

{
  "name": "my-app",
  "dependencies": {
    "react": "^16.12.0",
    "core-js": "2.6.11"
  },
  "browserslist": [
    "last 2 versions",
    "> 5%",
    "not IE < 11"
  ]
}

我们可以获得以下信息：

• react 库需要支持 >= ie 9 的浏览器版本。
• core-js 库是用于 polyfill ES6 的，因此可以使用所有浏览器支持的特性。
• 该项目支持最新的2个浏览器版本、使用量超过5%的浏览器，并且排除了比 IE 11 更旧的浏览器。

如果需要对它进行修改，我们需要确认以下几个问题：

1. 是否存在不支持的浏览器或版本？
2. 是否使用了不受支持的特性？
3. 是否合理地指定了支持浏览器的版本？

解决方案

在确认存在问题后，我们可以按照以下步骤解决：

1. 编辑 .browserslistrc 文件，或者在 package.json 文件中修改 browserslist 字段。
2. 移除不受支持的浏览器或版本。
3. 根据需求添加需要使用的特性。
4. 合理指定浏览器支持的版本范围。

例如，我们可以按照以下步骤解决以上问题：

1. 将 .browserslistrc 文件中的 ie 11 改为 ie >= 11。
2. 将 .browserslistrc 文件中的 chrome 49 移除或升级为支持的版本。
3. 在 package.json 文件中将 core-js 的版本升级至 3.x，以支持 ES6。
4. 对 browserslist 字段进行必要的修改。

结论

在开发过程中，我们需要不断检查和更新浏览器配置，以确保我们的项目能够在支持的浏览器中正常工作，并且使用了最新的特性和优化。

以上是对 browserslisterror 错误信息的解读和处理方法，如果您仍然遇到该问题，可以详细查看错误信息，并按照以上步骤进行检查和修改。