Angular CLI ng build 命令
本章通过示例解释 ng build 命令的语法、参数和选项。
语法
ng build 命令的语法如下：
ng build <project> [options] ng b <project> [options]
ng build 命令将 Angular 应用程序/库编译到给定路径下名为 dist 的输出目录中。
论据
ng build 命令的参数如下：
| 序号. | 参数和语法 | 描述 |
|---|---|---|
| 1 | <项目> | 要build的应用程序或库的名称。 |
Options
选项是可选参数。
| 序号. | 选项和语法 | 描述 |
|---|---|---|
| 1 | --aot=真|假 |
使用 Ahead of Time 编译build。 默认值：假。 |
| 2 | --baseHref=baseHref | 正在build的应用程序的基本 url。 |
| 3 | --buildEventLog=buildEventLog | 实验性build事件协议事件的输出文件路径。 |
| 4 | --buildOptimizer=true|false |
使用“aot”选项时启用“@angular-devkit/build-optimizer”优化。 默认值：假。 |
| 5 | --commonChunk=真|假 |
使用包含跨多个包使用的代码的单独包。 默认值：假。 |
| 6 | --配置=配置 |
命名的build目标，在 angular.json 的“配置”部分中指定。每个命名的目标都伴随着该目标的选项默认配置。显式设置它会覆盖“--prod”标志。 别名：-c。 |
| 7 | --crossOrigin=none|匿名|使用凭证 |
定义提供 CORS 支持的元素的跨域属性设置。 默认值：无。 |
| 8 | --delete输出Path=true|false |
在build之前删除输出路径。 默认值：真。 |
| 9 | --deployUrl=deployUrl | 将部署文件的 URL。 |
| 10 | --experimentalRollupPass=true|false |
在将模块与 Webpack 捆绑之前，使用 Rollup 连接模块。 默认值：假。 |
| 11 | --extractCss=true|false |
将全局样式中的 css 提取到 css 文件中，而不是 js 文件中。 默认值：假。 |
| 12 | --extractLicenses=true|false |
将所有许可证提取到单独的文件中。 默认值：假。 |
| 13 | --forkTypeChecker=true|false |
在分叉的进程中运行 TypeScript 类型检查器。 默认值：真。 |
| 14 | --help=true|false|json|JSON |
在控制台中显示此 命令的帮助消息。 默认值：假。 |
| 15 | --i18nMissingTranslation=警告|错误|忽略 |
如何处理 i18n 的缺失翻译。 默认值：警告。 |
| 16 | --索引=索引 | 配置应用程序的 HTML 索引的生成。 |
| 17 | --localize=真|假 | |
| 18 | --main=main | 应用程序主入口点的完整路径，相对于当前工作区。 |
| 19 | --namedChunks=真|假 |
对延迟加载的块使用文件名。 默认值：真。 |
| 20 | --ngswConfigPath=ngswConfigPath | ngsw-config.json 的路径。 |
| 21 | --优化=真|假 | 启用build输出的优化。 |
| 22 | --outputHashing=none|所有|媒体|捆绑 |
定义输出文件名缓存破坏散列模式。 默认值：无。 |
| 23 | --outputPath=输出路径 | 新输出目录的完整路径，相对于当前工作空间。默认情况下，将输出写入当前项目中名为 dist/ 的文件夹。 |
| 24 | --poll | 启用并定义文件监视轮询时间段(以毫秒为单位)。 |
| 25 | --polyfills=polyfills | polyfills 文件的完整路径，相对于当前工作空间。 |
| 26 | --preserveSymlinks=true|false |
解析模块时不要使用真实路径。 默认值：假。 |
| 27 | --prod=真|假 | “--configuration=production”的简写。如果为 true，则将build配置设置为生产目标。默认情况下，生产目标是在工作空间配置中设置的，因此所有build都使用捆绑、有限的 tree-shaking 以及有限的死代码消除。 |
| 28 | --进度=真|假 |
在build时将进度记录到控制台。 默认值：真。 |
| 27 | --resources输出Path=resources输出Path | 将放置样式资源的路径，相对于 outputPath。 |
| 28 | --serviceWorker=true|false |
为生产build生成服务工作者配置。 默认值：假。 |
| 29 | --showCircularDependencies=true|false |
在build中显示循环依赖警告。 默认值：真。 |
| 30 | --sourceMap=true|false |
输出源图。 默认值：真。 |
| 31 | --statsJson=真|假 |
生成一个“stats.json”文件，可以使用“webpack-bundle-analyzer”等工具进行分析。 默认值：假。 |
| 32 | --subresourceIntegrity=true|false |
启用子资源完整性验证。 默认值：假。 |
| 33 | --tsConfig=tsConfig | TypeScript 配置文件的完整路径，相对于当前工作空间。 |
| 34 | --vendorChunk=真|假 |
使用仅包含供应商库的单独捆绑包。 默认值：真。 |
| 35 | --verbose=真|假 |
为输出日志添加更多详细信息。 默认值：真。 |
| 36 | --watch=真|假 |
文件更改时运行build。 默认值：假。 |
| 37 | --webWorkerTsConfig=webWorkerTsConfig | Web Worker 模块的 TypeScript 配置。 |
首先，移动到使用更新的角度项目 生成 命令。将 app.component.html 的内容替换为以下内容，然后运行 命令。本章可在 https://www.newbiego.com/angular_cli/angular_cli_ng_generate.htm。
<app-goals></app-goals> <router-outlet></router-outlet>
例子
下面给出一个 ng build 命令的例子：
\>Node\>NewbieGo> ng build
Compiling @angular/animations : es2015 as esm2015
Compiling @angular/core : es2015 as esm2015
Compiling @angular/compiler/testing : es2015 as esm2015
Compiling @angular/animations/browser : es2015 as esm2015
Compiling @angular/core/testing : es2015 as esm2015
Compiling @angular/common : es2015 as esm2015
Compiling @angular/platform-browser : es2015 as esm2015
Compiling @angular/common/http : es2015 as esm2015
Compiling @angular/common/testing : es2015 as esm2015
Compiling @angular/platform-browser-dynamic : es2015 as esm2015
Compiling @angular/platform-browser/testing : es2015 as esm2015
Compiling @angular/router : es2015 as esm2015
Compiling @angular/animations/browser/testing : es2015 as esm2015
Compiling @angular/common/http/testing : es2015 as esm2015
Compiling @angular/forms : es2015 as esm2015
Compiling @angular/platform-browser/animations : es2015 as esm2015
Compiling @angular/platform-browser-dynamic/testing : es2015 as esm2015
Compiling @angular/router/testing : es2015 as esm2015
Generating ES5 bundles for differential loading...
ES5 bundle generation complete.
chunk {polyfills} polyfills-es2015.js, polyfills-es2015.js.map (polyfills) 141 kB [initial] [rendered]
chunk {runtime} runtime-es2015.js, runtime-es2015.js.map (runtime) 6.16 kB [entry] [rendered]
chunk {runtime} runtime-es5.js, runtime-es5.js.map (runtime) 6.16 kB [entry] [rendered]
chunk {styles} styles-es2015.js, styles-es2015.js.map (styles) 12.4 kB [initial] [rendered]
chunk {styles} styles-es5.js, styles-es5.js.map (styles) 13.9 kB [initial] [rendered]
chunk {main} main-es2015.js, main-es2015.js.map (main) 61.4 kB [initial] [rendered]
chunk {main} main-es5.js, main-es5.js.map (main) 65 kB [initial] [rendered]
chunk {polyfills-es5} polyfills-es5.js, polyfills-es5.js.map (polyfills-es5) 656 kB [initial] [rendered]
chunk {vendor} vendor-es2015.js, vendor-es2015.js.map (vendor) 2.67 MB [initial] [rendered]
chunk {vendor} vendor-es5.js, vendor-es5.js.map (vendor) 3.11 MB [initial] [rendered]
Date: 2020-06-04T01默认值：无。35.612Z - Hash: d5fd9371cdc40ae353bc - Time: 210494ms
这里 ng build 命令已经成功build了我们的项目 NewbieGo。