npm 包 @angular-devkit/build-angular 使用教程

前言

在现今的前端开发中，使用 AngularJS 已经成为了一种非常流行的技术。同时，AngularJS 也有很多的插件和工具，其中 @angular-devkit/build-angular 就是一个非常实用的 npm 包，该包提供了一些构建 Angular 应用程序时必不可少的工具和特性。本文将会详细介绍如何使用该 npm 包。

所需环境

使用 @angular-devkit/build-angular 的前提是你需要安装 Node.js 和 Angular 环境。

安装 @angular-devkit/build-angular

你可以通过 npm 来从 npmjs 上安装这个包。打开命令行工具，进入项目的根目录，输入以下命令：

npm install @angular-devkit/build-angular --save-dev

这个命令将会安装 @angular-devkit/build-angular 包并将其添加到依赖列表中。

配置 angular.json

@angular-devkit/build-angular 使用 Angular CLI 中的 angular.json 文件来配置构建选项。要添加构建选项，请将以下内容添加到项目的 angular.json 文件中：

-- -------------------- ---- -------
------------ -
  -------- -
    ---------- ----------------------------------------
    ---------- -
      ------------- --------
      -------- -----------------
      ------- --------------
      ------------ -------------------
      ----------- ------------------------
      ------ -----
      --------- -
        ------------------
        ------------
      --
      --------- -
        -----------------
      --
      ---------- --
    -
  -
-

这个配置将会告诉 @angular-devkit/build-angular 怎么样构建你的 Angular 应用程序，比如指定输出目录、HTML 文件、TypeScript 文件等。有了这些配置之后，当开发者运行 ng build 命令时，就能够告诉 Angular CLI 此次构建应该怎样进行。

使用 @angular-devkit/build-angular

@angular-devkit/build-angular 暴露了一些工具和功能，可以在构建过程中使用。以下是一些示例代码：

1. 使用 Deploy URL

Deploy URL 常用于指定在构建后生成的文件被部署到的绝对路径。可以通过 @angular-devkit/build-angular 中的 buildOptimizer 字段来实现。

"build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
    "deployUrl": "https://example.com/myapp/",
    "buildOptimizer": true
  }
}

2. 使用 Progress Web

Progress Web 可以提高应用程序的响应速度，缩短启动时间。使用 @angular-devkit/build-angular 中的 serviceWorker 字段可以实现。该字段为 boolean 类型，表示是否要启用 Progressive Web 性能优化。

"build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
    "serviceWorker": true
  }
}

3. 部署到 GitHub Pages

可以将 Angular 应用程序部署到 GitHub Pages。为此，@angular-devkit/build-angular 提供了一个名为 angular-cli-ghpages 的包。运行以下命令来安装它：

npm install --save-dev angular-cli-ghpages

安装完成后，在项目文件夹中使用以下命令就可以将应用程序部署到 GitHub Pages：

npx ngh --dir=dist/my-app

"dist/my-app" 是你的应用程序的输出目录。

结语

@angular-devkit/build-angular 能够帮助我们在构建 Angular 应用程序时获得更好的开发体验并提供更好的性能优化。如果你目前正在开发 Angular 应用程序并且需要更好的构建工具，那么这个 npm 包非常值得一试。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/108586