捆绑用于生产的 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 上构建应用程序；采用的方法主要取决于我们尝试构建的项目类型、时间和经验。