作为前端开发者，随着公司业务的不断发展和增长，业务对组件功能、交互的诉求会越来越多，不同产品或者团队之间公用的组件也会越来越多，这时候就需要有一套用于支撑内部使用的组件库，也可以是基于已有组件扩展或者封装一些原生三方库。本文会手把手教你搭建自己的Angular组件库。
创建组件库我们首先创建一个Angular项目，用来管理组件的展示和发布，用以下命令生成一个新的项目
ng new <my-project>
项目初始化完成后，进入到项目下运行以下cli命令初始化lib目录和配置, 生成一个组件库骨架
ng generate library <my-lib> --prefix <my-prefix>
my-lib为自己指定的library名称，比如devui，my-prefix为组件和指令前缀,比如d-xxx，默认生成的目录结构如下
angular.json配置文件中也可以看到projects下面多出了一段项目类型为library的配置
"my-lib": { "projectType": "library", "root": "projects/my-lib", "sourceRoot": "projects/my-lib/src", "prefix": "dev", "architect": { "build": { "builder": "@angular-devkit/build-ng-packagr:build", "options": { "tsConfig": "projects/my-lib/tsconfig.lib.json", "project": "projects/my-lib/ng-package.json" }, "configurations": { "production": { "tsConfig": "projects/my-lib/tsconfig.lib.prod.json" } } }, ...
关键配置修改 目录布局调整从目录结构可以看出默认生成的目录结构比较深，参考material design，我们对目录结构进行自定义修改如下：
修改说明：
删除了my-lib目录下的src目录，把src目录下的test.ts拷贝出来，组件库测试文件入口
把组件平铺到my-lib目录下，并在my-lib目录下新增my-lib.module.ts(用于管理组件的导入、导出)和index.ts(导出my-lib.module.ts，简化导入)
修改angular.json中my-lib下面的sourceRoot路径，指向my-lib即可
修改如下：
// my-lib.module.ts import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { AlertModule } from 'my-lib/alert'; // 此处按照按需引入方式导入，my-lib对应我们的发布库名 @NgModule({ imports: [ CommonModule ], exports: [AlertModule], providers: [], }) export class MyLibModule {} // index.ts export * from './my-lib.module'; //angular.json "projectType": "library", "root": "projects/my-lib", "sourceRoot": "projects/my-lib", // 这里路径指向我们新的目录 "prefix": "devui"
库构建关键配置ng-package.json配置文件，angular library构建时依赖的配置文件
{ "$schema": "../../node_modules/ng-packagr/ng-package.schema.json", "dest": "../../publish", "lib": { "entryFile": "./index.ts" }, "whitelistedNonPeerDependencies": ["lodash-es"] }
关键配置说明：
dest，lib构建输出路径，这里我们修改为publish目录，和项目构建dist目录区分开
lib/entryFile，指定库构建入口文件，此处指向我们上文的index.ts
whitelistedNonPeerDependencies(可选)，如果组件库依赖了第三方库，比如lodash，需要在此处配置白名单，因为ng-packagr构建时为了避免第三方依赖库可能存在多版本冲突的风险，会检查package.json的dependencies依赖配置，如果不配置白名单，存在dependencies配置时就会构建失败。
package.json配置，建议尽量使用peerDependcies，如果业务也配置了相关依赖项的话
{ "name": "my-lib", "version": "0.0.1", "peerDependencies": { "@angular/common": "^9.1.6", "@angular/core": "^9.1.6", "tslib": "^1.10.0" } }
详细完整的配置，可以参考angular官方文档 https://github.com/ng-packagr/ng-packagr/blob/master/docs/DESIGN.md
开发一个Alert组件 组件功能介绍我们参考DevUI组件库的alert组件开发一个组件，用来测试我们的组件库，alert组件主要是根据用户传入的类型呈现不同的颜色和图标，用于向用户显示不同的警告信息。视觉显示如下
首先，我们看一下alert组件目录包含哪些文件
目录结构说明：
组件是一个完整的module（和普通业务模块一样），并包含了一个单元测试文件
组件目录下有一个package.json，用于支持二级入口（单个组件支持按需引入）
public-api.ts用于导出module、组件、service等，是对外暴露的入口，index.ts会导出public-api，方便其它模块
关键内容如下：