承上篇
【Angular CLI】Angular CLI 命令列參數紀錄 (中) ng generate,ng lint,ng test,ng e2e
將繼續把剩下的指令介紹完畢
ng build
【Angular CLI】Angular CLI 命令列參數紀錄 (中) ng generate,ng lint,ng test,ng e2e
將繼續把剩下的指令介紹完畢
ng build --help 執行畫面 |
介紹
ng build 將應用程式編譯到輸出目錄
建構的內容通常儲存於 dist/ 目錄中。
構建或服務於項目的所有命令ng build / serve / e2e將刪除輸出目錄(dist/ 預設)。可以通過--delete-output-path=false選項禁用此功能。
index.html中的基本標記處理
構建時,您可以使用--base-href your-url選項修改index.html中的基本標記(<base href =“/”>)。
#在index.html中將基本標記 href 設置為 /myUrl/
ng build --base-href / myUrl /
綁定和 Tree-Shaking
所有構建都使用綁定 和有限的tree-shaking,而--prod構建也通過UglifyJS運行有限的死代碼消除。
--build-optimizer和--vendor-chunk
使用Build Optimizer時,默認情況下將禁用供應商塊。您可以使用--vendor-chunk = true覆蓋它。
如果沒有單獨的供應商組塊,則使用Build Optimizer的總捆綁包大小會更小,因為與應用程序代碼在同一塊中的供應商代碼使得Uglify可以刪除更多未使用的代碼。
CSS資源
CSS中的資源(如圖像和字體)將作為構建的一部分自動複製。如果資源小於10kb,它也將被內聯。
您將看到這些資源在dist/的根部輸出和指紋識別。
ES2015支持
要在ES2015模式下構建,請編輯./tsconfig.json以使用“target”:“es2015”(而不是es5)。
這將導致應用程序TypeScript和Uglify輸出為ES2015,並通過package.json中的es2015條目加載第三方庫(如果可用)。
建構的內容通常儲存於 dist/ 目錄中。
構建或服務於項目的所有命令ng build / serve / e2e將刪除輸出目錄(dist/ 預設)。可以通過--delete-output-path=false選項禁用此功能。
index.html中的基本標記處理
構建時,您可以使用--base-href your-url選項修改index.html中的基本標記(<base href =“/”>)。
#在index.html中將基本標記 href 設置為 /myUrl/
ng build --base-href / myUrl /
綁定和 Tree-Shaking
所有構建都使用綁定 和有限的tree-shaking,而--prod構建也通過UglifyJS運行有限的死代碼消除。
--build-optimizer和--vendor-chunk
使用Build Optimizer時,默認情況下將禁用供應商塊。您可以使用--vendor-chunk = true覆蓋它。
如果沒有單獨的供應商組塊,則使用Build Optimizer的總捆綁包大小會更小,因為與應用程序代碼在同一塊中的供應商代碼使得Uglify可以刪除更多未使用的代碼。
CSS資源
CSS中的資源(如圖像和字體)將作為構建的一部分自動複製。如果資源小於10kb,它也將被內聯。
您將看到這些資源在dist/的根部輸出和指紋識別。
ES2015支持
要在ES2015模式下構建,請編輯./tsconfig.json以使用“target”:“es2015”(而不是es5)。
這將導致應用程序TypeScript和Uglify輸出為ES2015,並通過package.json中的es2015條目加載第三方庫(如果可用)。
參數
--prod
用於將配置設置為“prod”的標誌。
--configuration(別名:-c)
指定要使用的配置。
--main
主入口點文件的名稱。
--polyfills
polyfills文件的名稱。
--ts-config
TypeScript配置文件的名稱。
--optimization
定義構建的優化級別。
--output-path
將放置輸出的路徑。
--aot
使用提前編譯構建。
--source-map
輸出源圖。
--eval-source-map
輸出文件內評估源圖。
--vendor-chunk
使用僅包含供應商庫的單獨捆綁包。
--common-chunk
使用包含跨多個包使用的代碼的單獨包。
--base-href
正在構建的應用程序的基本URL。
--deploy-url
將部署文件的URL。
--verbose
添加更多詳細信息以輸出日誌記錄
--progress
在構建時將進度記錄到控制台。
--i18n-file
用於i18n的本地化文件。
--i18n-format
使用--i18n-file指定的本地化文件的格式。
--i18n-locale
用於i18n的語言環境。
--i18n-missing-translation
如何處理i18n缺失的翻譯。
--extract-cdd
從全局樣式中提取css到css文件而不是js文件。
--watch
文件更改時運行構建。
--output-hashing
定義輸出文件名緩存清除散列模式。
--poll
啟用並定義查看輪詢時間段的文件(以毫秒為單位)。
--delete-ouput-path
在構建之前刪除輸出路徑。
--preserve-symlinks
解析模塊時不要使用真實路徑。
--extract-licenses
僅在生產版本的情況下,在單獨的文件中提取所有許可證。
--show-circular-dependencies
在構建上顯示循環依賴性警告。
--build-optimizer
使用'aot'選項時,啟用@ angular-devkit / build-optimizer優化。
--named-chunks
使用延遲加載的塊的文件名。
--subresource-integrity
允許使用子資源完整性驗證。
--service-worker
為生產版本生成服務工作者配置。
--ngsw-config-path
ngsw-config.json的路徑。
--skip-app-shell
用於防止構建app shell的標誌。
--index
索引HTML文件的名稱。
--stats-json
生成'stats.json'文件,可以使用以下工具進行分析:#webpack-bundle-analyzer 或https://webpack.github.io/analyse。
--fork-type-checker
在分叉的進程中運行TypeScript類型檢查器。
用於將配置設置為“prod”的標誌。
--configuration(別名:-c)
指定要使用的配置。
--main
主入口點文件的名稱。
--polyfills
polyfills文件的名稱。
--ts-config
TypeScript配置文件的名稱。
--optimization
定義構建的優化級別。
--output-path
將放置輸出的路徑。
--aot
使用提前編譯構建。
--source-map
輸出源圖。
--eval-source-map
輸出文件內評估源圖。
--vendor-chunk
使用僅包含供應商庫的單獨捆綁包。
--common-chunk
使用包含跨多個包使用的代碼的單獨包。
--base-href
正在構建的應用程序的基本URL。
--deploy-url
將部署文件的URL。
--verbose
添加更多詳細信息以輸出日誌記錄
--progress
在構建時將進度記錄到控制台。
--i18n-file
用於i18n的本地化文件。
--i18n-format
使用--i18n-file指定的本地化文件的格式。
--i18n-locale
用於i18n的語言環境。
--i18n-missing-translation
如何處理i18n缺失的翻譯。
--extract-cdd
從全局樣式中提取css到css文件而不是js文件。
--watch
文件更改時運行構建。
--output-hashing
定義輸出文件名緩存清除散列模式。
--poll
啟用並定義查看輪詢時間段的文件(以毫秒為單位)。
--delete-ouput-path
在構建之前刪除輸出路徑。
--preserve-symlinks
解析模塊時不要使用真實路徑。
--extract-licenses
僅在生產版本的情況下,在單獨的文件中提取所有許可證。
--show-circular-dependencies
在構建上顯示循環依賴性警告。
--build-optimizer
使用'aot'選項時,啟用@ angular-devkit / build-optimizer優化。
--named-chunks
使用延遲加載的塊的文件名。
--subresource-integrity
允許使用子資源完整性驗證。
--service-worker
為生產版本生成服務工作者配置。
--ngsw-config-path
ngsw-config.json的路徑。
--skip-app-shell
用於防止構建app shell的標誌。
--index
索引HTML文件的名稱。
--stats-json
生成'stats.json'文件,可以使用以下工具進行分析:#webpack-bundle-analyzer 或https://webpack.github.io/analyse。
--fork-type-checker
在分叉的進程中運行TypeScript類型檢查器。
介紹
ng config [key] [value] 取得配置的內容。[key] 提供 JSON 路徑的格式
例如: a[3].foo.bar[0]
只提供 [key] 將會回傳該值。如果同時提供 [key] 和 [value] 將會設置該值
參數
--global (別名: -g)
獲取/設置配置中的內容(在主目錄中)
介紹
ng doc [關鍵字 ] 使用瀏覽器搜尋 Angular API 的文件。
參數
--search (alias: -s)
搜尋整個 angular.io 的網站不只是API 文件。
介紹
ng xi18n 從模板中取得 i18n 的資訊 。
參數
--configuration (別名: -c)
指定要使用的配置。
--browser-target
指定瀏覽器的目標。
--i18n-format
生成文件的輸出格式。
--i18n-locale
指定應用程式的語言。
--output-path
輸出的路徑。
--out-file
輸出的檔案名稱。
介紹
ng update 將目前的應用程式更新到最新版本
參數
--dry-run (別名: -s)
無須進行任何修改即可運行。
--force
如果為false 安裝的內容與更新內容不相容即會出錯。
--all
是否更新 package.json 的所有內容。
--next
使用目前最大的版本包含 beta 和 RC。
--migrate-only
僅執行遷移不更新已安裝的版本。
--next
使用目前最大的版本包含 beta 和 RC。
--migrate-only
僅執行遷移不更新已安裝的版本。
--from
要從中遷移的版本。
要從中遷移的版本。
--to
要應用遷移的版本。
--registry
要使用NPM 註冊表。
Angular CLI 指令文章
【Angular CLI】Angular CLI 命令列參數紀錄 (上) ng new,ng serve
【Angular CLI】Angular CLI 命令列參數紀錄 (中) ng generate,ng lint,ng test,ng e2e
【Angular CLI】Angular CLI 命令列參數紀錄 (下) ng build,ng config,ng doc,ng xi18n,ng update