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.tw/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 專案。

列印頁面