前言
在接触 Angular 开发过程中，我们经常会需要自己写一些公共库组件等，为此我们需要掌握如何发布一个 Angular 组件库，更重要的是使用脚手架将其构建出来。这时 npm 包@manekinekko/angular-library-starter 就是一种选择。
安装
在命令行中输入以下命令，安装并创建基于此脚手架的新库项目。
npm install -g @angular/cli ng new my-library cd my-library npm install @manekinekko/angular-library-starter --save-dev
运行
使用如下指令启动开发模式：
ng serve
该指令会启动调试服务，当您修改组件库内容时会自动刷新。
构建
使用如下指令构建出您的库：
ng build --prod your-library-name
为了以 AOT 模式运行您的库，您必须使用以下指令：
npm run build:lib
发布
使用如下指令发布您的库：
npm publish
这将发布您的库，并将其上传到 NPM 包管理器。
示例代码
以下是使用此脚手架所构建的简单组件代码示例。本例子组件实现了简单的模拟模态框弹出功能。
-- -------------------- ---- -------
------ - ---------- ------- ------- ------------ - ---- ----------------
------------
--------- --------
------------ -------------------------
---------- --------------------------
--
------ ----- -------------- ---------- ------ -
--------- ------------ --------------------- - --- ---------------
------ --------- - ------
------------- - -
---------- -
-
------ --------- -
-------------- - ------
----------------------------
-
------ ----------- -
-------------- - -----
-
-结语
@manekinekko/angular-library-starter 脚手架可以方便地创建 Angular 库，提供了现代化的开发体验。使用该工具，我们能够轻松创建自己的库并发布到 npm 包管理器上。希望本篇文章能够帮助到前端开发者们，帮助更多开发者学习使用此脚手架，并创造出更好的 Angular 库。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bca967216659e244646