如何使用Angular-CLI创建并发布自定义Angular类库至NPM仓库

我天天跟Angular类库打交道，这套流程熟得很，给你一步步掰扯清楚：

1. 先把环境准备好 #

首先得确保你本地有这些工具：

• Node.js（推荐LTS版本）和npm/yarn
• 最新版的Angular CLI，没装的话跑这个命令：

  npm install -g @angular/cli
  

  装完可以用ng version检查一下版本，确保cli是最新的。

2. 创建类库专属的工作区 #

Angular CLI推荐用工作区来管理类库，这样能和测试应用（如果有的话）分开。咱先建一个不带默认应用的工作区：

ng new my-lib-workspace --create-application=false
cd my-lib-workspace

然后在这个工作区里生成你的类库：

ng generate library my-custom-library

执行完后，类库的代码会放在projects/my-custom-library目录下，这就是咱要开发的核心区域。

3. 开发类库代码&引入外部依赖 #

3.1 编写模块和服务 #

比如你要做一个带服务的类库，可以先生成一个服务：

ng generate service my-business --project=my-custom-library

然后在my-custom-library.module.ts里配置模块，把服务加到providers里（如果要对外提供的话），组件/指令的话加到declarations和exports里。

3.2 引入外部类库 #

比如你要引入lodash这类外部库，先进入类库目录安装依赖：

cd projects/my-custom-library
npm install lodash
# 如果需要类型定义，再加这个
npm install -D @types/lodash

之后就能在你的类库代码里正常导入使用了，比如在服务里：

import * as _ from 'lodash';

@Injectable({ providedIn: 'root' })
export class MyBusinessService {
  formatData(data: any) {
    return _.pick(data, ['id', 'name']);
  }
}

4. 配置对外暴露的内容（对应你说的index.ts） #

Angular类库默认用public-api.ts作为对外暴露的入口（你可以理解成就是index.ts的作用），打开projects/my-custom-library/src/public-api.ts，把你想让外部使用的模块、服务、组件都加进去：

// 暴露模块
export * from './lib/my-custom-library.module';
// 暴露服务
export * from './lib/my-business.service';
// 如果有组件/指令也可以加进来
// export * from './lib/my-custom.component';

只有这里导出的内容，外部项目才能import到。

5. 构建类库 #

回到工作区根目录，执行构建命令：

cd ../..
ng build my-custom-library

如果要构建生产环境的优化版本，用这个：

ng build my-custom-library --configuration production

构建完成后，产物会放在dist/my-custom-library目录下，这个目录里的内容就是咱要发布到NPM的东西。

6. 发布到NPM仓库 #

6.1 检查发布配置 #

先进入dist/my-custom-library目录，打开package.json，确认里面的name（类库的NPM包名，要确保没被占用）、version（语义化版本，比如1.0.0）、description这些信息是对的。

6.2 登录NPM #

如果你还没登录过NPM，先跑这个命令，按提示输入用户名、密码、邮箱：

npm login

6.3 发布 #

直接在dist/my-custom-library目录下执行：

npm publish

如果是私有类库，记得加--access private参数：

npm publish --access private

发布成功后，就能在NPM上搜到你的包了，其他项目可以用npm install my-custom-library来安装使用。

一些实用小提示 #

• 版本管理：每次发布前记得更新package.json里的version，遵循语义化版本规则（主版本.次版本.修订版本）。
• 本地测试：可以在工作区里创建一个测试应用ng generate app test-app，然后安装本地构建的类库npm install ../dist/my-custom-library，测试没问题再发布，避免踩坑。
• peerDependencies：Angular CLI会自动把@angular/core这类依赖设为peerDependencies，这样不会重复打包，不用手动修改。

内容的提问来源于stack exchange，提问作者Goofyrocks