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

写在前面

为了让 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.md、LICENSE 时会自动被复制到 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。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 简单谈谈关于Angular Cli打包的事

    本文主要给大家介绍了关于Angular Cli打包的事,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 一.引言 Angular从开发再到生产环境部署都离不开Angular Cli工具集,而Angular Cli本质上是使用 Webpack(当前使用版本为2) 来打包资源. Webpack 本身并不复杂,略用过一点都清楚,只需要创建一个 webpack.config.js 的文件并简单的配置,就可以把一个复杂的应用所有文件全部打包成若干静态资源文件. 然而一个复杂的应用免不了使

  • Angular.js项目中使用gulp实现自动化构建以及压缩打包详解

    gulp介绍 基于流的前端自动化构建工具,利用gulp可以提高前端开发效率,特别是在前后端分离的项目中.使用gulp能完成以下任务: 压缩html.css和js 编译less或sass等 压缩图片 启动本地静态服务器 其他 目标 一键安装项目所有的依赖模块 一键安装项目所有的依赖库 代码检查确保严格语法正确 能将angularjs的html装换成js模块并且压缩到js文件中 将所有css文件合并压缩 将所有的js文件合并压缩 动态引入资源文件 拥有开发环境和生产环境两种打包方式 工具 npm基于

  • angular2+node.js express打包部署的实战

    Angular2我自己还在摸索学习中,本文介绍了angular2+node.js express打包部署的实战,分享给大家,也给自己留个笔记 angular是客户端js,Node.js 是服务端JS,建立SPA 网站需要把这两者统一到一起. 1.angular2项目创建,使用angular-cli ng new mypos 2.使用express命令行工具创建express项目. express --view=hbs 3.angular2 中 需要引用到第三方库 例如 jQuery,bootst

  • es6+angular1.X+webpack 实现按路由功能打包项目的示例

    需求来源 之前使用jspm来打包项目 但是有个最大的缺点,就是只能把项目打包成一个大的js,当项目开发到后期会很大,网上找了很久也没找到合理的jspm打包方式. 所以开始调研可以打包angular项目成多个文件的工具. 调研过程 过程中看了些 vue,react配合webpack按路由功能打包的demo,感觉webpack对于打包成多个文件比较擅长. 结果 第一步 核心模块依赖加载 #core.module.js //核心模块 import 'angular-route'; //官方路由依赖 i

  • Angular项目从新建、打包到nginx部署全过程记录

    前言 当前,AngularJS作为Javascript的MVC(也有人说是MV*,暂且不纠结这个)框架被广泛使用,它为更快且更容易地开发响应式的Web提供了强大的机制.作为MVC框架,它将Web前端代码分成三个组件Model,View和Controller.因此,在data model,应用逻辑(Controllers)和view展示之间有明确的分离,让你更容易地关注关键的开发区域.view接收来自model的数据来展示.当用户通过点击或者敲击键盘和应用交互时,controller通过改变模型中

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

    写在前面 为了让 Angular 类库应用范围更自由,Angular 提出一套打包格式建议名曰:Angular Package Format,包括 FESM2015.FESM5.UMD.ESM2015.ESM5.ES2015 格式,不同格式可以在不同的环境(Angular Cli.Webpack.SystemJS等)中使用. 传统方式需要对这些格式逐一打包,一个示例打包脚本写法.这种写法只能针对不同项目的配置,而且除非你了解这些格式的本质否则很难维护:后来社区根据 APF 规范实现了类库 ng-

  • shell脚本学习之调用脚本将文件打包zip的方法示例

    前言 本文主要给大家介绍的是关于调用脚本将文件打包zip的相关资料,分享出来供大家参考学习,下面来一起看看详细的介绍: 最近刚刚接触shell脚本,写了一点简单的练手.这里是用python调用脚本执行打包操作. 方法如下: 第一步,创建脚本: #!/bin/sh CERT_DIR_ZIP=/data/cert/keys zip_user(){ zip -P $zip_psw /data/frontend/tmp/$zip_name.zip $client/* } if [ "x$1"

  • vue-cli 如何打包上线的方法示例

    以vue创建的官方例子为例子,我们在开发环境的时候会 npm run dev ,生成 而想要打包成一份很简单, 只需要 npm run build 这个命令 这两种命令的配置文件在config的index.js 一种是build 一种是dev ,而我们想要在本地查看打包后的成果,需要在assetsPublicPath 改变它的路径, 具体为什么,可以看index.html引入的文件路径 之后只需要放在服务器上运行就好了. *常用技巧 1.如果在config -> index.js 中的 buil

  • Ionic + Angular.js实现图片轮播的方法示例

    Ionic + Angular.js实现图片轮播的方法示例

    本文主要给大家介绍了关于Ionic + Angular实现图片轮播的相关资料,分享出来供大家参考学习,需要的朋友们下面来一起看看吧. 先来看看实现的效果图: 方法示例: template文件夹新建slider.html <ion-view view-title="图片轮播"> <ion-content class="padding" scroll="false"> <ion-slides class="sl

  • Webpack打包字体font-awesome的方法示例

    使用webpack构建font-awesome或者bootstrap的时候,最常见的一个问题就是构建字体文件的问题.经常会出现无法找到字体文件的问题.下面就讲一下如何正确构建引入字体文件: 1. 首先安装依赖: 复制代码 代码如下: npm install style-loader css-loader file-loader font-awesome-webpack --save-dev 2. 在入口文件中引入font-awesome require('font-awesome-webpack

  • 在Angular中使用JWT认证方法示例

    本文介绍了在Angular中使用JWT认证方法示例,分享给大家,具体如下: 项目地址: grading-system 基于session的认证和基于token的认证的方式已经被广泛使用.在session认证中,服务端会存储一份用户登录信息,这份登录信息会在响应时传递给浏览器并保存为Cookie,在下次请求时,会带上这份登录信息,这样就能识别请求来自哪个用户. 在基于session的认证中,每个用户都要生成一份session,这份session通常保存在内存中,随着用户量的增加,服务端的开销会增大

  • spring boot测试打包部署的方法

    有很多网友会时不时的问我,spring boot项目如何测试,如何部署,在生产中有什么好的部署方案吗?这篇文章就来介绍一下spring boot 如何开发.调试.打包到最后的投产上线. 开发阶段 单元测试 在开发阶段的时候最重要的是单元测试了,springboot对单元测试的支持已经很完善了. 1.在pom包中添加spring-boot-starter-test包引用 <dependency> <groupId>org.springframework.boot</groupI

  • 解决Nginx端口冲突的排查方法示例

    问题描述 一个Spring + Angular前后端分离的项目,使用Nginx进行数据转发. Nginx监听端口8100,前台端口4200,后台端口8080. 像往常一样,提前配置好MySQL.配置好Redis,引入项目的Nginx配置文件,然后启动前台.后台,成功. 接下来出现了问题:前台发起的请求,只有极少数能被后台接收到,大部分都是404,随着在浏览器中的点击,控制台不断的出现404. 如果只是404,那问题就很简单,很大可能是Nginx端口转发设置错了.但它的神奇之处就在于,还有那么几次

  • Vue自动构建发布脚本的方法示例

    简介 使用cross-env, scp2两个插件完成 cross-env cross-env这是一款运行跨平台设置和使用环境变量的脚本. 为什么需要cross-env? NODE_ENV=production 像这样设置环境变量时,大多数Windows命令提示符都会阻塞 .(Windows上的Bash是例外,它使用本机Bash.)同样,Windows和POSIX命令使用环境变量的方式也有所不同.对于POSIX,您可以使用: $ENV_VAR 和在Windows上可以使用 %ENV_VAR% .

  • springboot整合阿里云oss上传的方法示例

    OSS申请和配置 1. 注册登录 输入网址:https://www.aliyun.com/product/oss 如果没有账号点击免费注册,然后登录. 2.开通以及配置 点击立即开通 进入管理控制台 第一次使用会出现引导,按引导点击"我知道了",然后点击创建Bucket. 如果没有存储包或流量包点击购买. 点击确定,返回主页面,出现该页面,点击我知道了 将EndPoint记录下来,方便后期添加到我们项目的配置文件中 创建 AccessKeyID 和 AccessKeySecret 点击

随机推荐