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


Posted in Javascript onSeptember 21, 2018

写在前面

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

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

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

如何使用

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

ng g library <library name>

而打包,则:

ng build <library name>

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

配置说明

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

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 生成的结构大概如下:

<libary name>
├── 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 规定必须包含 README.md 文件,否则访问已发布类库页时会有未找到描述文件错误提示。

若想创建一个 <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。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Prototype Class对象学习
Jul 19 Javascript
基于jquery的图片幻灯展示源码
Jul 15 Javascript
JavaScript类属性的访问方式详解
Feb 11 Javascript
jQuery使用after()方法在元素后面添加多项内容的方法
Mar 26 Javascript
轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮
Nov 30 Javascript
jQuery Raty 一款不错的星级评分插件
Aug 24 Javascript
Vue表单实例代码
Sep 05 Javascript
实现JavaScript高性能的数据存储
Dec 11 Javascript
Vue.js图片预览插件使用详解
Aug 27 Javascript
产制造追溯系统之通过微信小程序实现移动端报表平台
Jun 03 Javascript
layer提示框添加多个按钮选择的实例
Sep 12 Javascript
js 数组 fill() 填充方法
Nov 02 Javascript
基于vue中keep-alive缓存问题的解决方法
Sep 21 #Javascript
vue中前进刷新、后退缓存用户浏览数据和浏览位置的实例讲解
Sep 21 #Javascript
vue单页面应用打开新窗口显示跳转页面的实例
Sep 21 #Javascript
详解Vue改变数组中对象的属性不重新渲染View的解决方案
Sep 21 #Javascript
默认浏览器设置及vue自动打开页面的方法
Sep 21 #Javascript
详解Vue中数组和对象更改后视图不刷新的问题
Sep 21 #Javascript
详解vue 数组和对象渲染问题
Sep 21 #Javascript
You might like
PHP的PSR规范中文版
2013/09/28 PHP
PHP中数据库单例模式的实现代码分享
2014/08/21 PHP
php设置页面超时时间解决方法
2015/09/22 PHP
php使用parse_str实现查询字符串解析到变量中的方法
2017/02/17 PHP
2017年最新PHP经典面试题目汇总(上篇)
2017/03/17 PHP
[对联广告] JS脚本类
2006/08/27 Javascript
iframe 父窗口和子窗口相互的调用方法集锦
2010/12/15 Javascript
利用jQuery实现可输入搜索文字的下拉框
2013/10/23 Javascript
html的DOM中document对象anchors集合用法实例
2015/01/21 Javascript
Ionic2系列之使用DeepLinker实现指定页面URL
2016/11/21 Javascript
使用openSpeDiv方法实现Ecshop登录弹窗框效果
2017/03/13 Javascript
基于 webpack2 实现的多入口项目脚手架详解
2017/06/26 Javascript
BootStrap Table前台和后台分页对JSON格式的要求
2017/06/28 Javascript
使用JQ完成表格隔行换色的简单实例
2017/08/25 Javascript
jQuery实现对网页节点的增删改查功能示例
2017/09/18 jQuery
值得收藏的vuejs安装教程
2017/11/21 Javascript
详解Vue用cmd创建项目
2019/02/12 Javascript
TypeScript高级用法的知识点汇总
2019/12/17 Javascript
js实现表格数据搜索
2020/08/09 Javascript
运动检测ViBe算法python实现代码
2018/01/09 Python
python+selenium+chrome批量文件下载并自动创建文件夹实例
2020/04/27 Python
CSS3支持IE6, 7, and 8的边框border属性
2012/12/28 HTML / CSS
html5开发之viewport使用
2013/10/17 HTML / CSS
瑜伽国际:Yoga International
2018/04/18 全球购物
提高EJB性能都有哪些技巧
2012/03/25 面试题
教师节促销方案
2014/03/22 职场文书
我爱家乡演讲稿
2014/09/12 职场文书
关于运动会的广播稿
2014/09/22 职场文书
2014年统计工作总结
2014/11/21 职场文书
2014年销售助理工作总结
2014/12/01 职场文书
社区重阳节活动总结
2015/03/24 职场文书
企业党支部工作总结2015
2015/05/21 职场文书
演讲开场白和结束语
2015/05/29 职场文书
六年级数学教学反思
2016/02/16 职场文书
pytorch实现ResNet结构的实例代码
2021/05/17 Python
Node与Python 双向通信的实现代码
2021/07/16 Javascript