Angular CLI - ng build 命令

本章解释了 ng build 命令的语法、参数和选项，并附带示例。

语法

ng build 命令的语法如下：

ng build <project> [options]
ng b <project> [options]

ng build 命令将 Angular 应用程序/库编译到指定路径的 dist 输出目录中。

参数

ng build 命令的参数如下：

序号	参数 & 语法	描述
1	<project>	要构建的应用程序或库的名称。

选项

选项是可选参数。

序号	选项 & 语法	描述
1	--aot=true\|false	使用提前编译 (Ahead of Time) 进行构建。默认值：false。
2	--baseHref=baseHref	正在构建的应用程序的基准 URL。
3	--buildEventLog=buildEventLog	实验性功能：构建事件协议事件的输出文件路径。
4	--buildOptimizer=true\|false	使用 'aot' 选项时启用 '@angular-devkit/build-optimizer' 优化。默认值：false。
5	--commonChunk=true\|false	使用单独的包包含多个包中使用的代码。默认值：false。
6	--configuration=configuration	指定的构建目标名称，如 angular.json 的 "configurations" 部分中所指定。每个命名目标都带有一个该目标的选项默认值配置。显式设置此项将覆盖 "--prod" 标志。别名：-c。
7	--crossOrigin=none\|anonymous\|use-credentials	定义提供 CORS 支持的元素的 crossorigin 属性设置。默认值：none。
8	--deleteOutputPath=true\|false	在构建之前删除输出路径。默认值：true。
9	--deployUrl=deployUrl	文件将部署到的 URL。
10	--experimentalRollupPass=true\|false	在使用 Webpack 打包模块之前，使用 Rollup 将模块连接起来。默认值：false。
11	--extractCss=true\|false	将全局样式中的 css 提取到 css 文件中，而不是 js 文件中。默认值：false。
12	--extractLicenses=true\|false	将所有许可证提取到单独的文件中。默认值：false。
13	--forkTypeChecker=true\|false	在分叉进程中运行 TypeScript 类型检查器。默认值：true。
14	--help=true\|false\|json\|JSON	在控制台中显示此命令的帮助消息。默认值：false。
15	--i18nMissingTranslation=warning\|error\|ignore	如何处理 i18n 的缺失翻译。默认值：warning。
16	--index=index	配置应用程序 HTML 索引的生成。
17	--localize=true\|false
18	--main=main	应用程序主入口点的完整路径，相对于当前工作区。
19	--namedChunks=true\|false	对延迟加载的块使用文件名。默认值：true。
20	--ngswConfigPath=ngswConfigPath	ngsw-config.json 的路径。
21	--optimization=true\|false	启用构建输出的优化。
22	--outputHashing=none\|all\|media\|bundles	定义输出文件名缓存清除哈希模式。默认值：none。
23	--outputPath=outputPath	新输出目录的完整路径，相对于当前工作区。默认情况下，将输出写入当前项目中的 dist/ 文件夹。
24	--poll	启用并定义文件监视轮询时间段（以毫秒为单位）。
25	--polyfills=polyfills	polyfills 文件的完整路径，相对于当前工作区。
26	--preserveSymlinks=true\|false	解析模块时不使用真实路径。默认值：false。
27	--prod=true\|false	"--configuration=production" 的简写。如果为 true，则将构建配置设置为生产目标。默认情况下，生产目标在工作区配置中设置，以便所有构建都使用打包、有限的 tree-shaking 和有限的死代码消除。
28	--progress=true\|false	在构建时将进度日志记录到控制台。默认值：true。
27	--resourcesOutputPath=resourcesOutputPath	样式资源将放置的路径，相对于 outputPath。
28	--serviceWorker=true\|false	为生产版本生成 service worker 配置。默认值：false。
29	--showCircularDependencies=true\|false	显示构建中的循环依赖警告。默认值：true。
30	--sourceMap=true\|false	输出源映射。默认值：true。
31	--statsJson=true\|false	生成一个 'stats.json' 文件，可以使用 'webpack-bundle-analyzer' 等工具对其进行分析。默认值：false。
32	--subresourceIntegrity=true\|false	启用子资源完整性验证的使用。默认值：false。
33	--tsConfig=tsConfig	TypeScript 配置文件的完整路径，相对于当前工作区。
34	--vendorChunk=true\|false	使用单独的包仅包含供应商库。默认值：true。
35	--verbose=true\|false	向输出日志添加更多详细信息。默认值：true。
36	--watch=true\|false	文件更改时运行构建。默认值：false。
37	--webWorkerTsConfig=webWorkerTsConfig	Web Worker 模块的 TypeScript 配置。

首先，移动到使用 **ng generate** 命令更新的 Angular 项目。将 app.component.html 的内容替换为以下内容，然后运行命令。本章可在 https://tutorialspoint.com/angular_cli/angular_cli_ng_generate.htm 查看。

<app-goals></app-goals>
<router-outlet></router-outlet>

示例

ng build 命令的示例如下：

\>Node\>TutorialsPoint> 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:31:35.612Z - Hash: d5fd9371cdc40ae353bc - Time: 210494ms

这里 ng build 命令成功构建了我们的 TutorialsPoint 项目。

打印页面