创建Angular npm库

创建一个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)

2.使用 ng-packagr 打包 Angular

---

题外话: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 */)]
}