使用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 相关文章推荐
Javascript设置对象的ReadOnly属性(示例代码)
Dec 25 Javascript
node.js中的console.log方法使用说明
Dec 09 Javascript
JavaScript验证Email(3种方法)
Sep 21 Javascript
JS读写CSS样式的方法汇总
Aug 16 Javascript
几句话带你理解JS中的this、闭包、原型链
Sep 26 Javascript
js中获取 table节点各tr及td的内容简单实例
Oct 14 Javascript
jQuery读取XML文件的方法示例
Feb 03 Javascript
vue自定义指令directive实例详解
Jan 17 Javascript
layui获取选中行数据的实例讲解
Aug 19 Javascript
深入理解Puppeteer的入门教程和实践
Mar 05 Javascript
浅析Angular 实现一个repeat指令的方法
Jul 21 Javascript
Vue项目中使用better-scroll实现菜单映射功能方法
Sep 11 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
星际原理概述
2020/03/04 星际争霸
PHP+ACCESS 文章管理程序代码
2010/06/21 PHP
PHP图片裁剪函数(保持图像不变形)
2014/05/04 PHP
PHP date()函数警告: It is not safe to rely on the system解决方法
2014/08/20 PHP
PHP中if和or运行效率对比
2014/12/12 PHP
JavaScript 面向对象的之私有成员和公开成员
2010/05/04 Javascript
javascript对select标签的控制(option选项/select)
2013/01/31 Javascript
用js写了一个类似php的print_r输出换行功能
2013/02/18 Javascript
IE 下Enter提交表单存在重复提交问题的解决方法
2014/05/04 Javascript
javascript使用正则控制input输入框允许输入的值方法大全
2014/06/19 Javascript
JavaScript中的闭包介绍
2015/03/15 Javascript
jQuery获得子元素个数的方法
2015/04/14 Javascript
JS模仿编辑器实时改变文本框宽度和高度大小的方法
2015/08/17 Javascript
JavaScript中的Function函数
2015/08/27 Javascript
javascript中加var和不加var的区别 你真的懂吗
2016/01/06 Javascript
MVC+jQuery.Ajax异步实现增删改查和分页
2020/12/22 Javascript
jQuery+CSS3+Html5实现弹出层效果实例代码(附源码下载)
2016/05/16 Javascript
浅谈JS之tagNaem和nodeName
2016/09/13 Javascript
JS控制div跳转到指定的位置的几种解决方案总结
2016/11/05 Javascript
Vue.js实战之使用Vuex + axios发送请求详解
2017/04/04 Javascript
Node.js Mongodb 密码特殊字符 @的解决方法
2017/04/11 Javascript
JS自动生成动态HTML验证码页面
2017/06/14 Javascript
Vue三层嵌套路由的示例代码
2018/05/05 Javascript
微信小程序CSS3动画下拉菜单效果
2018/11/04 Javascript
详解puppeteer使用代理
2018/12/27 Javascript
JavaScript arguments.callee作用及替换方案详解
2020/09/02 Javascript
python 字典(dict)遍历的四种方法性能测试报告
2014/06/25 Python
python远程连接服务器MySQL数据库
2018/07/02 Python
python批量获取html内body内容的实例
2019/01/02 Python
Python Numpy 控制台完全输出ndarray的实现
2020/02/19 Python
python 实现有道翻译功能
2021/02/26 Python
戛纳奢侈品商店:Jacques Loup法国
2019/11/04 全球购物
家长会标语
2014/06/24 职场文书
党员创先争优心得体会
2014/09/11 职场文书
导游词之襄阳古城
2019/09/27 职场文书
vue elementUI表格控制对应列
2022/04/13 Vue.js