4

在使用angular的过程中,我们希望将一些公共的组件等剥离到一个单独的库中,然后供我们在其它的angular项目中直接导入。

本文将展示如何初始化并集成测试一个angular库。

angular cli

首先我们需要确认angular的版本,比如我当前计划初始化适用于angular18版本的库,则需要在全局先安装18版本的angular-cli,然后使用 ng version来进行版本确认:

命令如下:

npm install -g @angular/cli@18.0.0
ng version

全局展示如下:

(base) panjie@panjiedeMac-Studio ~ % npm install -g @angular/cli@18.0.0

added 22 packages, removed 93 packages, and changed 203 packages in 17s

40 packages are looking for funding
  run `npm fund` for details
(base) panjie@panjiedeMac-Studio ~ % ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 18.0.0

此时我们便拥有了一个18版本的全局cli,使用它可以快速的创建18版本的angular项目。

创建项目

在创建angular库前,我们需要创建一个用于集成测试的项目,否则我们只能够对库中的组件进行单元测试。而传统的npm link的方法,并不适用于测试angular库(会报错)。

在自己的喜欢的文件夹处,创建angular项目:

ng new angular18

选择项目使用的stylesheet以及是否启用SSR后继续。

创建库

比如此时我想创建一个名称为@yunzhi/ng-theme的库,则可以直接使用关键字来创建。

首先我们先进入到angular18项目中,然后再直接创建库的命令:

(base) panjie@panjiedeMac-Studio ng % cd angular18
(base) panjie@panjiedeMac-Studio angular18 % ng g lib @yunzhi/ng-theme

此时将自动在angular18下创建projects文件夹:

├── projects
│   └── yunzhi
│       └── ng-theme

测试库

在进行单元测试时,可以使用ng t @yunzhi/ng-theme,在进行集成测试时,可以直接在当前项目中引用库中的在pubilc-api.ts文件中抛出的元素。

发布库

ng build @yunzhi/ng-theme

然后进入相应的文件夹npm publish即可。

注意点

在集成测试中引用库中的元素时,必须要import xxx/pubilc-api.ts,不能够直接import相关的文件!因为只有xxx/pubilc-api.ts抛出的,才可以在库发布后被第三方成功引用到。


潘杰
3.1k 声望240 粉丝