博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
使用 ng-packagr 打包 Angular
阅读量:6922 次
发布时间:2019-06-27

本文共 3080 字,大约阅读时间需要 10 分钟。

写在前面

为了让 Angular 类库应用范围更自由,Angular 提出一套打包格式建议名曰:,包括 FESM2015、FESM5、UMD、ESM2015、ESM5、ES2015 格式,不同格式可以在不同的环境(Angular Cli、Webpack、SystemJS等)中使用。

传统方式需要对这些格式逐一打包,一个打包脚本写法。这种写法只能针对不同项目的配置,而且除非你了解这些格式的本质否则很难维护;后来社区根据 APF 规范实现了类库 ,通过简单的配置可以将你的类库打包成 APF 规范格式。

至 V6 以后 Angular Cli 也基于 ng-packagr 实现了另一个 应用构建器。

如何使用

既然 ng-packagr 被 Angular Cli 内置,这让我们进一步简化了生产一个 APF 规范格式的类库的成本。在 Angualr Cli 里使用 ng g library 来创建一个类库模板,例如在一个新的 Angular 应用里执行:

ng g library 
复制代码

而打包,则:

ng build 
复制代码

最终,将生成的 dist/<libary name> 目录下文件上传相应包管理服务器(例如:npm)提供给其他 人使用。

配置说明

由 Angular Cli 生成的类库模板大部分内容同 Angular 应用一样,只是多了一个 ng-package.json 的配置文件(对于生产环境是 ng-package.prod.json),它是专门针对 ng-packagr 的一个配置文件,如同 angular.json 一般也是基于 JSON Schema 格式,因此可以通过访问 了解所有细节,以下描述一些重点项。

whitelistedNonPeerDependencies

ng-packagr 默认会根据 package.json 的 peerDependencies 节点清单来决定类库所需要第三方依赖包,这些依赖包是不会被打包至类库。

然而,所依赖包不存在 peerDependencies 节点里时(当然建议需要依赖的项应该在里面),就需要该属性的配置。

lib/entryFile

指定入口文件。

lib/umdModuleIds

UMD 格式采用 rollup 打包,当类库需要引用一些无法猜出正确 UMD 标识符时,就需要你手动映射这些类库的标识。

"umdModuleIds": {    "lodash": "_"}复制代码

angular.json

Angular Cli 配置文件 angular.json 内会增加一个以 <libary name> 命名的构建配置,绝大多数配置性同普通 Angular 应用如出一辙,唯一不同的是 builder 节点为:

"builder": "@angular-devkit/build-ng-packagr:build"复制代码

次级入口

有时候一个类库可能会包含着多个二次入口,就像 @angular/core 类库包含着一个 @angular/core/testing 模块,它只是运用于测试,因此并不希望在项目中引入 @angular/core 时也包含测试代码,但同时二者又是同一个功能性时,这种次级导入显得非常重要。

另一种像 ngx-bootstrap、@angular/cdk/ally 等都提供次级模块的导入,可以更好的优化体积。

不论出于何种目的,都可以通过 Angular Cli 简单的文件组织进一步打包出主、次级分明的类库。

ng g library 生成的结构大概如下:

├── src| ├── public_api.ts| └── lib/*.ts├── ng-package.json├── ng-package.prod.json├── package.json├── tsconfig.lib.json└── tsconfig.spec.json复制代码

当根目录下包含 README.mdLICENSE 时会自动被复制到 dist 目录中,Npm 规定必须包含 文件,否则访问已发布类库页时会有未找到描述文件错误提示。

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

├── 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 类库(基建系列类库)包含着多个类库、类库又包含多个次级导入时,Angular Cli 会显得有点啰嗦,特别是对每个类库的 angular.json 配置。其实 @angular-devkit/build-ng-packagr 非常简单,如果将取进一步简化,整个实现差不多相当于:

const path = require('path');const ngPackage = require('ng-packagr');const target = path.resolve(__dirname, './projects/
');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。

转载于:https://juejin.im/post/5bab64826fb9a05d2c43b3b4

你可能感兴趣的文章
[SQL]死锁处理语句
查看>>
临别前夕,工作总结 于2014年8月13日 终稿
查看>>
【floyd】HDU 1874 畅通project续
查看>>
第十篇:扩展SOUI的控件及绘图对象(ISkinObj)
查看>>
Winform开发框架中实现信息阅读状态的显示和存储
查看>>
Android 下拉刷新框架实现
查看>>
IGS_学习笔记09_IREP生成服务后台工具Soagenerate.sh
查看>>
安卓开发_浅谈ListView之分页列表
查看>>
斐波那契堆
查看>>
mongodb batchInsert
查看>>
Sun公司开源游戏服务器
查看>>
Jasmine测试ng Promises - Provide and Spy
查看>>
Response.Write具体介绍
查看>>
ARM汇编编程基础之一 —— 寄存器
查看>>
安装LVS安装LVS和配置LVS的工作比较繁杂
查看>>
Scilab 的画图函数(1)
查看>>
经常使用的android弹出对话框
查看>>
音频 属性具体解释(涉及採样率、通道数、位数、比特率、帧等)
查看>>
[詹兴致矩阵论习题参考解答]习题2.8
查看>>
什么是敏捷设计
查看>>