使用ng-packagr打包Angular的方法示例

若想创建一个 <libary name>/testing 的次级入口，只需要在 <libary name> 根目录下创建一个 testing 目录：

<libary name>
├── src
| ├── public_api.ts
| └── lib/*.ts
├── ng-package.json
├── ng-package.prod.json
├── package.json
├── tsconfig.lib.json
├── tsconfig.spec.json
└── testing
 ├── src
 | ├── public_api.ts
 | └── *.ts
 └── package.json

核心是需要提供一个 package.json 文件，而且内容简单到姥姥家。

{
 "ngPackage": {}
}

最后，依然使用 ng build <libary name>，会产生一个次级导入模块。

小结

至此，基本上利用 Angular Cli 可以快速的构建一个可发布于 Npm Angular 类库，更复杂的可以构建像 ngx-bootstrap、@angular/cdk/* 类库。

自定义构建

Angular Cli 虽然提供非常便利的环境，但是对于一些复杂环境像 Delon 类库（ng-alain基建系列类库）包含着多个类库、类库又包含多个次级导入时，Angular Cli 会显得有点啰嗦，特别是对每个类库的 angular.json 配置。其实 @angular-devkit/build-ng-packagr 非常简单，如果将取进一步简化，整个实现差不多相当于：

const path = require('path');
const ngPackage = require('ng-packagr');

const target = path.resolve(__dirname, './projects/<libary name>');

ngPackage
 .ngPackagr()
 .forProject(path.resolve(target, `ng-package.prod.json`))
 .withTsConfig(path.resolve(target, 'tsconfig.lib.json'))
 .build()
 .then(() => {
 // 构建完成后干点事
 });

将上面的代码放到 ./build.js，执行：

node scripts/build.js

其结果完成是等价。

build() 返回的是一个 Promise 对象，意味着可以确保构建开始前和结束后做一点额外的事。

总结

ng-packagr 极大简化 Angular 类库被打包出一个 APF 规范建议，虽然它以 ng- 开头，但本质上并不一定非要在 Angular 中运用，也可以使用在 React、VUE。