开发和生产的不同浏览器列表？答案

【问题标题】：Different browserlist for dev and prod?开发和生产的不同浏览器列表？
【发布时间】：2021-02-04 20:41:26
【问题描述】：

我只想在生产版本中激活Differential Loading。原因是我不希望开发构建花费太长时间。

由于差异加载源自浏览器列表内容，我想为每个构建配置不同的浏览器列表。

这是开发者的浏览器列表：

> 0.5%
last 2 versions
Firefox ESR
not dead
not IE 9-11

这对于产品来说：

> 0.5%
last 2 versions
Firefox ESR
not dead
not IE 9-11

我使用这些命令激活我的开发和产品构建：

开发者：ng build

产品：ng build --prod

相当标准。

【问题讨论】：

标签： angular angular-cli

【解决方案1】：

如果我理解正确，那么更改 angular.json 中的构建配置应该可以解决问题。您可以使用 environment.ts 文件复制 Angular 默认执行的操作。

所以在angular.json 中的build.configurations.production 下，您可以添加到fileReplacements 数组中：

"fileReplacements": [
   {
     "replace": "src/environments/environment.ts",
     "with": "src/environments/environment.prod.ts"
   },
   {
     "replace": "src/.browserslistrc",
     "with": "src/.browserslistrc.prod"
   }
],

这些文件名是假定的，但您显然可以用您需要的任何名称替换。

编辑

我不完全确定这是否有效或如何测试它。根据 browserslist 文档，您还可以使用环境标志 https://github.com/browserslist/browserslist#configuring-for-different-environments

对于 Angular，如下所示：

[development]
> 0.5%
last 2 versions
Firefox ESR
not dead
not IE 9-11

[production]
> 0.5%
last 2 versions
Firefox ESR
not dead
not IE 9-11

这应该使用NODE_ENV，当使用ng serve（以及ng build）和production，当使用ng build --prod时Angular设置为development

【讨论】：

在 Angular 12 wnen 我调用 ng build --configuration production 我得到一个错误`数据路径“/fileReplacements/1/replace”必须匹配模式“\.(([cm]?j|t)sx? |json)$".`
是的，这似乎不再起作用了。