1. 项目结构:
my-library/
├── projects/
│ └── my-library/
│ ├── src/
│ │ ├── lib/
│ │ │ ├── my-component/
│ │ │ │ ├── my-component.component.ts
│ │ │ │ ├── my-component.component.html
│ │ │ │ └── my-component.component.css
│ │ │ ├── my-service/
│ │ │ │ ├── my-service.service.ts
│ │ │ │ └── index.ts
│ │ │ └── public-api.ts
│ │ ├── lib.module.ts
│ │ └── public-api.ts
│ ├── tsconfig.lib.json
│ └── ng-package.json
├── src/
│ └── public-api.ts
├── .gitignore
├── package.json
├── ng-package.json
└── README.md
- projects/my-library/src/lib: 包含库的源代码,按功能划分为子目录(例如,my-component、my-service)。
- projects/my-library/src/lib/public-api.ts: 导出库的公共 API,供其他项目使用。
- projects/my-library/src/lib/index.ts: 可选,用于聚合导出其他子模块。
- projects/my-library/tsconfig.lib.json: 库项目的 TypeScript 配置文件。
- projects/my-library/ng-package.json: 用于配置 ng-packagr 打包工具。
- src/public-api.ts: 在项目的根目录下,用于导出整个库的公共 API。
2. 库模块导出:
在 public-api.ts 或者 index.ts 文件中,将库的功能导出,以便其他项目可以访问。
// projects/my-library/src/lib/public-api.ts
export * from './my-component';
export * from './my-service';
如果有需要,你可以在 lib.module.ts 中组织导出的模块,并在 public-api.ts 中导出整个模块。
3. 打包配置 ng-package.json:
配置 ng-package.json 文件以告诉 ng-packagr 如何打包你的库。这个文件位于你的库项目的根目录。
{
"$schema": "./node_modules/ng-packagr/package.schema.json",
"lib": {
"entryFile": "public-api.ts"
}
}
在这个示例中,entryFile 指定了库的入口文件。
4. 发布到 npm:
如果你决定将库发布到 npm,确保你的 package.json 文件中包含正确的信息,包括名称、版本号、作者等。还需要在 .npmignore 文件中指定不需要发布的文件或目录。
// package.json
{
"name": "my-library",
"version": "1.0.0",
// ...
}