内容简介:创建一个Angular库总是一个被关注的话题,随着Angular6的发布,创建库变得更统一和容易. 这篇文章介绍基于新的Angular-Cli来创建Angular的库ng-packagr已集成到angular-cli中,不再需要手动安装配置ng-packagr这个指令做了三件事:
创建一个Angular库总是一个被关注的话题,随着Angular6的发布,创建库变得更统一和容易. 这篇文章介绍基于新的Angular-Cli来创建Angular的库
一.ng-packagr
ng-packagr已集成到angular-cli中,不再需要手动安装配置ng-packagr
二.环境,Angular-Cli 6+
三.创建项目并生成库的Project
yarn global add @angular/cli // 升级到Angular6+ ng new handle-batch-error // 创建新项目 cd handle-batch-error ng g library batch-error // 创建库!! 复制代码
四. ng g library
这个指令做了三件事:
1.创建projects为batch-error的子项目,生成子项目相关联的文件
2.更新angular.json文件,添加build和test类库的配置
3.安装一些用于build库的packages
tips1:
我们新建一个项目(handle-batch-error)后,再ng g library时,通常情况是想要library的名字和项目名相同,但ng g library却不能再命名为相同的名称(即handle-batch-error,事实上是不能和angular.json中的project name相同).
解决办法:改为驼峰命名即handleBatchError,生成的文件及package.json均和项目名(handle-batch-error)相同,而angular.json中生成的项目名为handleBatchError,
五.projects中文件介绍
1.ng-package.json
ng-packagr用来build的配置文件
2.package.json
类库的信息文件.
注意:开发库时,不应该随便用dependencies,而应该用peerDependencies。
3.src\public_api.ts
这是库的entryFile,你需要导出的所有内容都在这里面
export * from './lib/services/batch-error.service'; export * from './lib/batch-error.component'; export * from './lib/batch-error.module'; export * from './lib/constant/component.value'; 复制代码
src内就如同我们正常开发angular项目一样,并无区别
六.build
执行 ng build batch-error --prod,生成dist
tips2:angular.json中可以指定"defaultProject": "batch-error",执行ng build --prod即可
tips3:Angular支持打包生成多种可被使用的方式,具体介绍:
docs.google.com/document/d/… , 需翻墙
cd到dist/batch-error,执行npm publish,发布到npm仓库
七.使用类库
// module中引入类库 import {BatchErrorModule} from 'batch-error'; @NgModule({ imports: [ CommonModule, BatchErrorModule ] }) 复制代码
<!--html中使用组件--> <lib-batch-error [statusId]="statusId"></lib-batch-error> 复制代码
参考文档:
1.Building an Angular Library with the Angular CLI (version 6)
题外话:Vue的组件库打包,我是用的rollup,相当简单的配置,还有什么推荐的吗?
// rollup.config.js import VuePlugin from 'rollup-plugin-vue' export default { input: './src/index.js', output: { file: './dist/bundle.js', format: 'es' }, plugins: [VuePlugin(/* VuePluginOptions */)] } 复制代码
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- 利用 JavaSE 创建简单 HTTP Server
- docker利用Dockerfile创建镜像,上传docker hub
- iOS App创建证书,添加Appid,创建配置文件流程
- RabbitMQ集群创建
- 创建哈夫曼树
- RabbitMQ集群创建
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。