介绍
ng-lib-boilerplate 是一个基于 Angular 框架的 npm 包，可以帮助开发者更方便地构建、打包和发布自己的 Angular 组件库。本文将介绍如何使用 ng-lib-boilerplate，包括如何创建、开发、测试和发布一个 Angular 组件库。
创建一个新的 Angular 组件库
首先，我们需要创建一个新的 Angular 项目作为我们的组件库的代码库。可以使用 Angular CLI 快速创建一个 Angular 项目：
ng new my-library --prefix=ml cd my-library
这里使用了 --prefix=ml，表示我们的组件库的组件选择器（selector）的前缀为 ml。这是为了避免和其他库的组件选择器冲突。
接着，我们需要安装 ng-lib-boilerplate：
npm i ng-lib-boilerplate --D
这里使用了 -D，表示我们将 ng-lib-boilerplate 安装为开发依赖项。这是因为 ng-lib-boilerplate 只是一个工具库，它不应该包含在我们发布出去的组件库中。
现在，我们可以使用 ng-lib-boilerplate 提供的命令来初始化我们的组件库：
ng generate @ng-lib-boilerplate:library
此时，ng-lib-boilerplate 将会问我们一些问题。例如，需要我们输入我们的组件库名称，描述等信息。
接下来，ng-lib-boilerplate 将会自动对我们的项目进行一些修改，以实现以下功能：
- 添加
peerDependencies和dependencies到package.json中； - 添加必要的文件和文件夹，如
demo，用于演示组件； - 修改
tsconfig.json和tslint.json满足组件库的需求； - 修改
ng-package.json用于打包组件库。
开发组件
现在，我们已经成功地创建了一个 Angular 组件库，接下来就可以开始开发我们的组件了。
在创建组件之前，我们需要了解 Angular 的组件生命周期以及常用的组件装饰器。这部分内容可以参考官方文档。
假设我们要创建一个名为 my-button 的按钮组件。我们可以使用以下命令快速生成一个组件：
ng generate component my-button
我们可以在 my-button.component.ts 文件中编写我们的组件代码。假设我们要实现一个按钮，在按钮点击时标记为 active：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- ---------------
--------- -
------- ------------------- ---------- --------------------
---------
---------
-
--
------ ----- ----------------- -
----- - ---------
-------- - ------
--------- -
------------- - ---------------
-
-以上代码使用 Angular 的 ngClass 指令在按钮激活时添加 active 样式。点击按钮时，将标记为 active 或未标记。
打包组件
完成了我们的组件代码之后，我们需要将组件打包成一个可用的 npm 包。此时，我们可以使用 Angular 的 ng-packagr 工具来进行打包。
ng-lib-boilerplate 已经为我们设置好了必要的配置，我们可以通过以下命令来打包：
npm run build
这个命令将会在 dist/ 目录下生成一个名为 my-library 的文件夹，里面包含了我们的组件库和一些必要的文件。
接下来，我们需要将打包出来的文件上传到 npm 仓库中。我们可以使用以下命令来上传：
npm publish dist/my-library
注意，我们只需要上传 my-library 目录，而不是 dist 目录本身。
演示组件
为了让用户更直观地了解我们的组件库，我们还需要为每个组件创建一个演示页面。这个页面可以包含组件的描述、使用方法以及一些演示效果。
为了快速创建这些演示页面，我们可以使用 ng-lib-boilerplate 提供的命令：
ng generate @ng-lib-boilerplate:demo-page --name=my-button
以上命令会生成一个名为 my-button-demo-page 的组件，该组件用于演示 my-button 组件。
在生成演示页面之后，我们需要为其添加样式和一些演示代码。例如，我们的 my-button-demo-page 可以包含以下内容：
-- -------------------- ---- ------- ------------------------- ------- -- - ---- ---- --- -------- -------------- -------------- --------- --- --------- -- ---- ----------- ----- ------ - -------------- - ---- ------------- ----------- -------- - -------------- -- -- --- -- ------ ----- --------- -- ------ ------ --- --------- -- ---- ------------- ----- ---------------- ------------ --------------------------------- ------ ------------- ------------- ------------ ------------------------
注意，我们可以使用 Angular 的插值语法 {{}} 和方括号 [] 在演示页面中插入一些动态数据，例如组件属性的默认值。
结论
通过本文的介绍，我们已经了解了如何使用 ng-lib-boilerplate 快速构建、打包和发布我们的 Angular 组件库。同时，我们也学习了开发组件和演示页面的一些重要技巧。
希望本文对你学习和使用 Angular 组件库有所帮助，祝你好运！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600560b481e8991b448defa7