Angular CLI 构建目标与环境

Question

在 Angular CLI 中，运行 build 命令时，--target 和 --environment 选项有什么区别？

根据文档：

ng build 可以同时指定构建目标（--target=production 或 --target=development）和与该构建一起使用的环境文件（--environment=dev 或 --environment=prod）。默认使用开发构建目标和环境。

但是，他们从未真正澄清两者之间的区别。

从我所了解的情况来看，--environment 标志控制在进行构建时使用哪个环境文件（environment.ts vs. environment.prod.ts）。那么，--target 控制什么呢？

- Lukas S.

---

你有看过关于“--dev”和“--prod”构建的那个页面的部分吗？它用一张表格详细说明了它们的设置，还列出了无法使用标志的生产设置。 - jonrsharpe

这是之前提到的表格链接 - https://github.com/angular/angular-cli/wiki/build#--dev-vs---prod-builds - Sebastian Patten

基于那张表，我的理解是不是正确的，即 target 标志不直接影响构建过程的任何内容，而只是设置其他标志的快捷方式？此外，虽然您可以定义其他 环境，但不能定义其他 目标（只有内置的 dev 和 prod）？ - Lukas S.

@SergeyK 我也在想同样的事情。看来你是对的。 - phil294

Answer 1

--environment是来自.angular-cli.json的apps[0].environments对象的关键字。

它类似于运行环境的配置文件（例如：本地、开发服务器、测试服务器、CI服务器、阶段服务器、生产服务器等等）。apps[0].environments对象的值是一个文件名，包含该环境的所有设置。你可以在那里设置后端端点、密钥以及其他任何想要的内容。然后你就可以在代码中使用它：

import {environment} from '@environments/environment';
const userEndPoint = `${environment.apiRoot}/user/`;

每个环境都可以是 生产（environment.production === true）或非生产即 开发（environment.production === false）。这是一个目标，也可以用下一个参数来定义：

--target 是两个值的枚举：development 或 production。它是一个“元”标志，设置其他标志：

标志 | --dev | --prod
--- | --- | ---
--aot | false | true
--environment | dev | prod
--output-hashing | media | all
--sourcemaps | true | false
--extract-css | false | true
--named-chunks   | true | false
--build-optimizer | false | true（使用AOT和Angular 5）

--prod 还会设置以下不可标记的设置：
- 如果在 .angular-cli.json 中配置了服务工作者，则会添加服务工作者。
- 用生产值替换模块中的 process.env.NODE_ENV（对于某些库，如 react，这是必需的）。
- 运行 UglifyJS 对代码进行压缩。

来自 https://github.com/angular/angular-cli/wiki/build/1cf783837c392f5fadc7286e1fb28220b9a1b507#--dev-vs---prod-builds

- asnov

Answer 2

自 Angular CLI 6 起，环境选项已被弃用。

构建相关命令中的环境选项已被 fileReplacements 替换，请参阅 Wiki 以了解如何使用。

构建系统已经进行了大幅改进，使其更易于配置。 构建配置 选项已移动到工作区配置文件（angular.json）中。

当您使用 CLI 创建项目时，默认情况下会创建“生产”配置，并且您可以通过指定 --prod 选项来使用该配置。

默认开发配置和生产之间的区别在于开发配置使用 CLI 默认值（例如源映射），而生产配置启用 AOT、优化等。 --prod 元标志针对“生产”配置并启用 运行时生产模式。

切换到生产模式可通过禁用双重变更检测等开发特定检查来加快运行速度。

术语“环境”在文档的某些部分甚至已被替换为“构建目标”。--target选项早在CLI version 6中就被替换为--configuration。

- Trevor Karjanis

---

--target 的情况怎么样？当在 ng build 命令中添加此标志时，它也不再可执行。 - aj go

--target选项自版本6起已被弃用，现已被--configuration替代。 - Trevor Karjanis

Answer 3

--target=production 表示 angular-cli 将使用用于生产的所有内容进行构建。--environment=prod 表示您在应用程序“环境”中拥有的对象将具有“production”标志=true。

- onik

Answer 4

从文档中提取：构建目标和环境文件

ng build 可以同时指定构建目标（--target=production 或 --target=development）和用于该构建的环境文件（--environment=dev 或 --environment=prod）。默认情况下，使用开发构建目标和环境。

将构建目标设置为生产模式会产生以下效果：

1. 提前编译，这意味着 Angular 编译器不会包含在最终的构建中，这意味着更快的渲染速度、更小的体积
2. 对捆绑文件进行哈希
3. 生成的 JavaScript 文件进行缩小
4. Angular 运行在生产模式下，因此它停止了每个变更检测的两次检查
5. 仅在此模式下才能使用渐进式 Web 应用程序

- Abhijit Kar ツ

---

你能解释一下这个脚本的含义吗："build:client-and-server-bundles": "ng build --prod && ng build --prod --app 1 --output-hashing=false" - Jay