创建一个Angular库总是一个被关注的话题,随着Angular6的发布,创建库变得更统一和容易.
这篇文章介绍基于新的Angular-Cli来创建Angular的库
一.ng-packagr
ng-packagr已集成到angular-cli中,不再需要手动安装配置ng-packagr
二.环境,Angular-Cli 6+
image
三.创建项目并生成库的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的子项目,生成子项目相关联的文件
img
2.更新angular.json文件,添加build和test类库的配置
img
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
img
tips2:angular.json中可以指定"defaultProject": "batch-error",执行ng build --prod即可
tips3:Angular支持打包生成多种可被使用的方式,具体介绍:
https://docs.google.com/document/d/1CZC2rcpxffTDfRDs6p1cfbmKNLA6x5O-NtkJglDaBVs/preview#, 需翻墙
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 */)]
}
