简介
wideatech-ng-lib 是一款基于 Angular 框架的 npm 库，旨在提供一系列 Angular 组件和工具来优化前端开发体验。本教程将介绍如何安装、使用及扩展 wideatech-ng-lib。
安装
首先，在项目目录下使用 npm 命令进行安装：
npm install wideatech-ng-lib --save
使用
引入 wideatech-ng-lib
要使用 wideatech-ng-lib 的组件和工具，需在 Angular 的 AppModule 中 import wideatech-ng-lib：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ----------------------- - ---- ---------------------------------------
------ - ------------ ------------------- - ---- -----------------
------ - ---------------- - ---- -----------------------
------ - ------------ - ---- ------------------
------ - ------------ - ---- ------------------
------ - ------ - ---- ---------------
-- -- ----------------
------ - -------------------- - ---- -------------------
-----------
------------- -
-------------
--
-------- -
--------------
------------------------
-----------------
------------
--------------------
-- - ------- --- ----------------
---------------------
-- - ------- --- ------- ------
-----------------------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -使用 wideatech-ng-lib 的组件和工具
引入 wideatech-ng-lib 后，即可使用任意组件和工具。
例如，在模板中使用 Button 组件：
<wideatech-ng-button type="primary">Primary</wideatech-ng-button>
开发
组件开发
wideatech-ng-lib 的组件遵循 Angular 的组件设计原则，所以要开发一个 wideatech-ng-lib 的组件，需要先创建一个 Angular 组件，再将其封装成 wideatech-ng-lib 组件。
下面以 Button 组件为例，演示如何开发 wideatech-ng-lib 的组件：
创建 Angular 组件
wideatech-ng-button通过 Angular CLI 快速创建 Angular 组件：
ng g c wideatech-ng-button --export
生成的 wideatech-ng-button 目录下，有一个 wideatech-ng-button.component.ts 文件，它实现了一个 Button 组件的基本样式和行为：
-- -------------------- ---- ------- ------ - ---------- ------ ------- ------------ - ---- ---------------- ------------ --------- ---------------------- ------------ --------------------------------------- ---------- ---------------------------------------- -- ------ ----- -------------------------- - -------- ----- ------ - ---------- -------- --------- ------- - ------ -------- -------- ------- - ------ --------- -------- ----------------- - --- --------------- -------------- ---- - -------------------- - -该组件只具备基本的 Button 行为，实际项目中可能需要根据业务需求进行更改。
封装为 wideatech-ng-lib 的组件
在创建 wideatech-ng-lib 的组件之前，需要先安装 ng-packagr，它是一个命令行工具，可将 Angular 应用程序和库打包成 npm 包。
npm install ng-packagr --save-dev
安装完成后，添加一个 package.json 文件，输入以下内容：
-- -------------------- ---- ------- - ------- ------------------- ---------- -------- -------------- -------- ---------- --- ----- --- ---------- ----------- ------------ ------- -------------------------------------------------------- ---------- ---------------------------------------------- ------------------- - ------------------ ---------- ---------------- --------- - -添加 tsconfig.build.json 文件，输入以下内容：
-- -------------------- ---- ------- - ---------- ------------------ ------------------ - --------- ----------------- -------------- ----- ------------------------ ----- ------------------------- ---- -- ------------------------- - ---------------------- ----- --------------------- ----- ---------------------------- ----- -------------------- ---------------------------------------------- --------------- ------------------ -- ---------- - -------------- - -修改 tsconfig.json 文件，将
"target": "es5"改为"target": "es2015"。在 angular.json 文件的 build 配置中添加"preserveSymlinks": true。创建 wideatech-ng-button.component.ts 文件，输入以下内容：
-- -------------------- ---- ------- ------ - ---------- ------ ------- ------------ - ---- ---------------- ------------ --------- -------------------------- ------------ --------------------------------------- ---------- ---------------------------------------- -- ------ ----- -------------------------- - -------- ----- ------ - ---------- -------- --------- ------- - ------ -------- -------- ------- - ------ --------- -------- ----------------- - --- --------------- -------------- ---- - -------------------- - -生成的 wideatech-ng-button 目录下，还需要添加 wideatech-ng-button.module.ts 文件和 public_api.ts 文件。
wideatech-ng-button.module.ts 文件：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------ - ---- ------------------ ------ - -------------------------- - ---- ---------------------------------- ----------- ------------- ----------------------------- -------- --------------- -------- ----------------------------- -- ------ ----- ----------------------- - -
public_api.ts 文件：
export * from './wideatech-ng-button/wideatech-ng-button.module'; export * from './wideatech-ng-button/wideatech-ng-button.component';
打包 wideatech-ng-lib
在终端中，输入以下命令打包 wideatech-ng-lib：
ng-packagr -p projects/wideatech-ng-lib/tsconfig.build.json
打包完成后，在 wideatech-ng-lib 目录下生成 dist 目录，dist 目录中有 wideatech-ng-lib 目录，里面就是我们打包的 npm 包。
发布
注册 npm 账号
登录 npm
在终端中，输入以下命令：
npm login
该命令会在本地创建 .npmrc 文件，保存 npm 的登录信息。
发布
在终端中，进入 wideatech-ng-lib/dist/wideatech-ng-lib 目录，输入以下命令：
npm publish --access=public
若发布成功，可通过以下命令查看 lastest 版本：
npm view wideatech-ng-lib version
示例代码
<!-- app.component.html --> <lib-wideatech-ng-button type="primary" [loading]="isLoading" (clicked)="handleClick()">Primary Button</lib-wideatech-ng-button>
-- -------------------- ---- -------
-- ----------------
------ - --------- - ---- ----------------
------------
--------- -----------
------------ -----------------------
--
------ ----- ------------ -
---------- ------- - ------
------------- -
------------- -- -
-------------- - ----------------
-- ------
-
-总结
本教程介绍了如何安装、使用和开发 wideatech-ng-lib，希望能够对大家理解 npm 包的开发过程及使用方式有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600672eb0520b171f02e1e45