简介
angular-cli-library-generator 是一个基于 Angular-cli 的快速生成 Angular 包的工具，可便捷生成包的基础结构，并支持快速引入开发需要的依赖。本文将介绍使用 angular-cli-library-generator 快速创建 Angular 包的流程，以及如何运用该工具提升前端开发效率。
安装
首先，需要安装 angular-cli-library-generator 包，可以在命令行中输入以下命令：
npm install -g angular-cli-library-generator
使用
生成项目
运行以下命令即可生成项目：
ng generate library [library-name]
其中，[library-name] 为你的项目名称，可以自行填写。执行后，会自动生成该项目的基础结构，如下：
src/ -----lib/ ----------[library-name].module.ts tsconfig.lib.json
添加依赖
在生成项目后，需要在代码中加入所需的依赖。可以通过运行以下命令在项目中添加编号库：
ng add [package-name]
其中，[package-name] 为需要添加的依赖库的名称。例如，如需添加 Hammer.js 库，则可以运行以下命令：
ng add hammerjs
添加组件
为了使用该包，需要在其中添加一些组件。可以在命令行中运行以下命令来创建组件：
ng generate component [component-name]
其中， [component-name] 为需要创建的组件名称，可以自行填写。执行后，会自动创建相应的组件文件和模板，如下：
src/ -----lib/ ----------[component-name]/ ---------------[component-name].component.scss ---------------[component-name].component.html ---------------[component-name].component.ts
编译代码
在添加完所需的依赖和组件后，需要编译代码才能使用。可以通过运行以下命令来编译代码：
ng build [library-name]
其中， [library-name] 为需要编译的 Angular 库的名称。编译完成后，在 dist/[library-name] 目录下会生成编译后的包。
示例代码
添加依赖
可以在代码中添加依赖库 hammerjs，添加后即可引入 Hammer.js 库并使用，示例代码如下：
-- -------------------- ---- -------
------ - ------------ - ---- ---------------------------
------ ----------
-----------
------------- -
------------
--
-------- -
--------------
------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -添加组件
以下是添加组件步骤的完整示例代码：
-- -------------------- ---- ------- ------------ --------- ----------------------- ------------ ------------------------------------ ---------- ------------------------------------- -- ------ ----- ------------------------ ---------- ------ - ------------- - - ---------- - - -
总结
angular-cli-library-generator 工具可用于快速创建 Angular 包，使前端开发过程更为方便快捷。本文介绍了使用该工具的主要流程及一些常见操作，可以有效提升前端开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005671c81e8991b448e37a4