Angular Builders 使用与安装指南

Angular Builders 使用与安装指南

angular-builders Angular build facade extensions (Jest and custom webpack configuration) 项目地址: https://gitcode.com/gh_mirrors/an/angular-builders

Angular Builders 是一个致力于增强 Angular 构建体验的开源项目。它提供了额外的构建选项，如自定义 Webpack 配置和使用 Jest 进行测试，无需从 Angular CLI 中“弹出”（eject）。以下是关于其核心组件和如何开始使用的详细说明。

1. 项目目录结构及介绍

主要目录与文件结构:

• example: 可能包含了示例项目或配置的使用范例。
• packages: 核心功能所在，每个包通常对应一种特定的构建扩展功能。
  • custom-webpack: 自定义Webpack配置的Builder。
  • 其他可能包括 Jest、Bazel 等特定用途的Builder。
• scripts: 包含了项目的构建、发布等相关脚本。
• src: 主要源代码存放地，包括Builder的核心逻辑。
• .gitignore, LICENSE, README.md, yarn.lock 等标准项目文件，分别用于版本控制忽略项、软件许可说明、项目读我文件和依赖锁定文件。
• package.json: 定义了项目的元数据，包括依赖、脚本命令等。

关键组件简介:

• Builders: 如@angular-builders/custom-webpack是允许不脱离Angular CLI环境而定制Webpack配置的关键。
• Config Files: 特定Builder可能会引入自定义配置文件，例如 Jest 的配置文件用来适应Angular项目测试需求。

2. 项目的启动文件介绍

虽然这个项目本身并不直接提供一个应用运行的启动文件（比如 index.js 或 main.ts），它的核心在于提供给Angular项目在构建过程中的插件和扩展能力。对于用户而言，主要通过Angular CLI的命令来启动应用，例如使用 ng serve。但是，如果你想要集成这些Builder到你的项目中，修改或添加配置到你的 angular.json 文件将是启动时的关键步骤，其中可以指定使用这些自定义Builder。

3. 项目的配置文件介绍

angular.json

核心配置变更点: 当你想使用Angular Builders提供的特性时，你需要在你的 angular.json 文件中进行配置。例如，要在项目中启用自定义Webpack构建，你会在 architect -> build 或 test 配置下指定对应的Builder，类似于以下示例：

"builders": {
  "@angular-builders/custom-webpack:browser": {
    "options": {
      "webpackConfig": "path/to/your/custom/webpack.config.js"
    }
  }
}

这里的webpackConfig指向你的自定义Webpack配置文件路径。

自定义Builder的配置文件

除了 angular.json 外，还可能涉及到特定Builder需要的配置文件，如 Jest 的配置 jest.config.js，这些配置将直接影响到单元测试或编译的过程。

---

以上是基于Angular Builders项目的简要介绍和关键配置的解析。根据实际使用场景，还需要参考具体Builder的文档以获取详细的配置和使用指导。确保在实施任何配置更改前阅读最新的官方文档或仓库Readme以获得最准确的信息。

angular-builders Angular build facade extensions (Jest and custom webpack configuration) 项目地址: https://gitcode.com/gh_mirrors/an/angular-builders