Question

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

来自文档：

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

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

根据我的收集，--environment标志控制在进行构建时使用哪个环境文件（environment.ts vs environment.prod.ts）。但那么--target控制了什么？

Answer 1

--environment 是来自 .angular-cli.json 的 apps [0] .environments 对象的键p>

它就像运行环境的配置文件（例如：本地，开发服务器，测试服务器，CI服务器，舞台服务器，生产服务器等）。 apps [0] .environments 对象的值是包含环境所有设置的文件名。在那里你可以设置后端端点，键和你想要的任何其他东西。然后你可以在你的代码中使用它：

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

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

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

旗帜| --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 |使用AOT和Angular 5 true

- prod还设置以下不可标记的设置：
   - 如果在.angular-cli.json中配置，则添加服务工作者    - 用生产值替换模块中的process.env.NODE_ENV（某些库需要这样做，比如反应）。
   - 在代码上运行UglifyJS。

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

Answer 2

来自文档：Build Targets and Environment Files

public function render(array $configuration, UserElement $userElement) { $row = $configuration['row']; // Do some Magic here. $select = '<label style="font-weight: 400;">' . self::MESSAGE_FIELD_LABEL; $select .= '<select name="' . $configuration['itemFormElName'] . '" class="form-control form-control-adapt" ' . 'onchange=\'' . $configuration['fieldChangeFunc']['alert'] . '\'>'; $select .= '<option value=""></option>'; foreach ($contentElementUids as $siteName => $contentElementUid) { $isSelected = ($contentElementUid === (int) $configuration['itemFormElValue']); $select .= '<option ' . ($isSelected ? 'selected' : '') . ' value="' . $contentElementUid . '">' . $siteName . '</option>'; } $select .= '</select></label>'; return $select; }可以指定构建目标（ng build或 --target=production）以及要与该版本一起使用的环境文件（--target=development或--environment=dev）。默认情况下使用开发构建目标和环境。

将生成目标设置为生产具有以下效果：

提前编译，这意味着Angular编译器不会包含在最终版本中，这意味着渲染速度更快，尺寸更小
哈希捆绑文件
缩小生成的javascript文件
Angular在生产模式下运行，因此它会停止检查每次更改检测两次
渐进式网页应用仅适用于此模式

Answer 3

- target = production意味着angular-cli将使用一切用于构建，用于生产。 --environment = prod表示你在app“environment”中拥有的对象将具有“production”flag = true。

Answer 4

从Angular CLI 6开始，环境选项为deprecated。

与构建相关的命令中的环境选项已替换为fileReplacements，有关用法，请参见Wiki。

已经对构建系统进行了大修，以使其更易于配置。 Build configuration选项已移至工作区配置文件（angular.json）。

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

默认开发环境与生产之间的区别在于，开发配置使用CLI的默认值（例如源映射），而生产配置则启用AOT，优化等。--prod元标记的目标是“生产” ”配置并启用runtime production mode。

切换到生产模式可以通过禁用开发特定检查（例如双重变更检测周期）来使其运行更快。

在文档的某些部分中，“环境”一词甚至与“构建目标”一起replaced。

Angular CLI构建目标与环境

4 个答案: