捆綁用於生產的 Angular 應用程式

1. 使用 Angular CLI 捆綁用於生產的 Angular 應用程式
2. 使用 Webpack 捆綁 Angular 應用程式進行生產
3. 使用 Gulp 捆綁 Angular 應用程式進行生產
4. まとめ

本文將演示在成功建立應用程式後構建用於部署的 Angular 應用程式的不同方法。

在我們繼續構建應用程式之前，使用 ng serve --prod 執行應用程式是理想的；然後我們繼續訪問這個 URL：http://localhost:4200/ 來檢視應用程式的執行情況，從這裡我們可以觀察應用程式的執行行為。

現在讓我們看看捆綁 Angular 應用程式的不同方法。

使用 Angular CLI 捆綁用於生產的 Angular 應用程式

此方法是捆綁 Angular 應用程式最廣泛接受的方法，因為它適用於所有版本的 Angular。CLI 在構建過程中減少了開發人員的麻煩。

對於想要調整專案以使用 Ahead of Time Compilation 的開發人員來說，CLI 方法是你的最佳選擇。

首先，需要將 CLI 安裝到我們的 Angular 應用程式中；我們開啟終端，輸入 npm install -g @angular/cli，然後按 Enter。

完全安裝後，我們進入一個新資料夾，並通過鍵入 ng new newApp 建立一個新應用程式。所以我們繼續到這個資料夾開始構建我們的應用程式。

一旦我們開發了我們的應用程式，我們通過輸入 ng build 來捆綁應用程式。

它通常是壓縮捆綁應用程式的理想選擇，因為這使應用程式載入速度更快並且通常可以高效執行。

我們可以使用 Brotli 壓縮排行壓縮。我們開啟終端並輸入：for i in dist/*/*;做 brotli $i。

然後，我們完成了將 Angular 與 Angular CLI 捆綁在一起。

使用 Webpack 捆綁 Angular 應用程式進行生產

webpack 方法通常被認為是一個強大的模組打包器。它監控已構建應用程式的原始碼並查詢 import 語句。

它開發了兩個依賴關係圖，然後為應用程式釋出了兩個捆綁檔案。一個是 app.js，僅包含應用程式程式碼，另一個稱為 vendor.js 檔案，其中包含所有供應商依賴項。

要安裝 webpack，我們首先建立一個名為 angular-webpack 的新專案資料夾，我們 cd 進入該檔案，建立一個名為 package.json 的檔案，並在其中複製以下程式碼。

程式碼片段（package.json）：

{
  "name": "angular2-webpack",
  "version": "1.0.0",
  "description": "A webpack starter for Angular",
  "scripts": {
    "start": "webpack-dev-server --inline --progress --port 8080",
    "test": "karma start",
    "build": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail"
  },
  "license": "MIT",
  "dependencies": {
    "@angular/common": "~4.2.0",
    "@angular/compiler": "~4.2.0",
    "@angular/core": "~4.2.0",
    "@angular/forms": "~4.2.0",
    "@angular/http": "~4.2.0",
    "@angular/platform-browser": "~4.2.0",
    "@angular/platform-browser-dynamic": "~4.2.0",
    "@angular/router": "~4.2.0",
    "core-js": "^2.4.1",
    "rxjs": "5.0.1",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@types/node": "^6.0.45",
    "@types/jasmine": "2.5.36",
    "angular2-template-loader": "^0.6.0",
    "awesome-typescript-loader": "^3.0.4",
    "css-loader": "^0.26.1",
    "extract-text-webpack-plugin": "2.0.0-beta.5",
    "file-loader": "^0.9.0",
    "html-loader": "^0.4.3",
    "html-webpack-plugin": "^2.16.1",
    "jasmine-core": "^2.4.1",
    "karma": "^1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-jasmine": "^1.0.2",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "^2.0.1",
    "null-loader": "^0.1.1",
    "raw-loader": "^0.5.1",
    "rimraf": "^2.5.2",
    "style-loader": "^0.13.1",
    "typescript": "~2.3.1",
    "webpack": "2.2.1",
    "webpack-dev-server": "2.4.1",
    "webpack-merge": "^3.0.0"
  }
}

接下來，我們開啟一個終端並使用 npm install 安裝這些軟體包。專案完成後，我們執行 ng build 命令。

使用 Gulp 捆綁 Angular 應用程式進行生產

Gulp 是在 Angular 2 框架上捆綁 Angular 應用程式的另一個強大工具，因為它更有效地構建複雜的大型專案。此外，gulp 構建過程的某些部分可以自動化，從而減少工作流程的繁瑣。

首先，我們將建立一個新專案；我們進入資料夾並從終端安裝 gulp，使用 $npm install gulp。

我們在專案資料夾中建立一個 gulpfile.js 檔案，並將所有 HTML 檔案從 app/views 資料夾複製到 dist 資料夾。然後我們從終端執行 $gulp copy-html-files。

開發人員不需要執行 gulp build 中涉及的所有任務；需要安裝 $npm install gulp-run-sequence。它允許從終端執行 gulpfile.js 中的多個任務。

當我們的專案完全準備好時，我們執行 $gulp build。

如果我們想從 dist 資料夾中刪除一些內容，可能是在版本控制之前，或者開發人員想要刪除以前的檔案並注入新檔案，只需在終端輸入：npm install gulp-clean。

考慮到使用 gulp 構建 Angular 應用程式所需的步驟非常有彈性，我們可以自動化這個過程。我們安裝 npm install gulp-watch；每次我們更改檔案時，這將重新執行執行序列中定義的任何命令。

まとめ

有多種方法可以優化地在 Angular 上構建應用程式；採用的方法主要取決於我們嘗試構建的專案型別、時間和經驗。