28 构建和打包

在上一篇中，我们探讨了Angular 项目的结构及其最佳实践，尤其是代码复用和模块化的重要性。在本章中，我们将深入了解如何为 Angular 项目进行构建和打包，以便发布到服务器。

什么是构建和打包？

构建和打包是将开发环境中的应用程序转换成可部署版本的过程。这一过程包括代码的压缩、合并和优化，以提高应用的加载速度和运行性能。

构建过程

Angular 使用 Angular CLI 工具来简化构建和打包的流程。利用 Angular CLI，你可以轻松生成生产环境的构建版本。首先，确保已经在你的 Angular 项目中安装了 @angular/cli。

在项目目录中，你可以通过以下命令生成构建：

ng build --prod

其中 --prod 标志表示构建生产环境的代码。构建结果会输出到 dist/ 文件夹中。

1. 输出内容

dist/ 文件夹中的内容包括：

• index.html: 应用的入口文件。
• main.js: 应用的主要 JavaScript 代码。
• polyfills.js: 用于支持旧浏览器的 JavaScript 代码。
• styles.css: 全局样式文件。
• 其他依赖的文件和资源。

每个生成的文件都是经过压缩和优化的，这将使得应用在生产环境中有更好的性能。

配置 Angular 构建

你可以通过 angular.json 文件来配置构建过程中的各种参数。例如，你可以指定不同的输出路径、设置不同的环境变量，或修改文件的命名方式等。

{
  "projects": {
    "your-app-name": {
      "architect": {
        "build": {
          "options": {
            "outputPath": "dist/your-app-name",
            "optimization": true,
            "sourceMap": false,
            "extractCss": true
          }
        }
      }
    }
  }
}

使用环境变量

在构建时，你可能需要为应用程序设置不同的环境变量。Angular CLI 已内置支持环境变量，可以通过创建 src/environments/ 目录下的不同文件（如 environment.ts, environment.prod.ts）进行配置。

在代码中，你可以使用如下方式访问相应的环境变量：

import { environment } from '../environments/environment';

console.log(environment.apiUrl);

构建后的测试

构建完成后，我们可以运行一些基本的测试，确保应用在生产环境中能够正常运行。可以用静态服务器来快速检验构建效果。例如，使用 http-server 提供一个简单的 HTTP 服务器：

npm install -g http-server
cd dist/your-app-name
http-server

在浏览器中访问 http://localhost:8080，检查应用是否正常工作。

自动构建与 CI/CD

为了自动化构建和部署流程，我们可以结合 CI/CD 工具，如 GitHub Actions 或 GitLab CI。当你推送代码到主分支时，可以自动触发构建过程并部署到相应的服务器上。

以下是一个简单的 GitHub Actions 工作流示例，它将在每次推送时自动构建项目并保存构建产物：

name: CI

on:
  push:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v2
      
      - name: Set up Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '14'
      
      - name: Install dependencies
        run: npm install
      
      - name: Build project
        run: npm run build --prod
      
      - name: Upload artifacts
        uses: actions/upload-artifact@v2
        with:
          name: dist
          path: dist/

在这个工作流中，我们进行了代码检出、安装依赖、构建项目，并上传构建产物。这为后续的部署工作奠定了基础。

总结

在本章中，我们仔细研究了 Angular 应用的构建和打包过程，探讨了各种配置选项，并尝试通过实际案例来展示如何在生产环境中使用构建后的应用。接下来，我们将深入学习如何将构建后的应用部署到服务器，确保应用可供最终用户访问。这一过程也将是提升我们项目最终用户体验的重要环节。