当前位置：首页 > news >正文

发布一个angular的npm包（包含多个模块）

news 来源：原创 2025/6/12 21:49:08

为什么要发布npm包

根本原因时为了能够在更广泛的区域复用代码，比如公司不支持一般的外部网络，但是支持npm包的下载，那么就可以发布npm包，然后在公司内使用。

angular的npm不同吗

angular library
angular 目前已经到angular20 版本了，使用typescript，而typescript的代码无法直接执行。虽然可以把代码直接发布，然后npm install之后，拷贝代码到目录，直接利用。但是有更标准的angular的模块可以使用的办法。

首先编写代码

以我的项目为例
用于发布的原始ts代码位于项目的src/app/nexthub下，有faker和ui两个文件夹，最后他们被认为两个“模块”。
在这里插入图片描述
其中index.ts 和public-api.ts 是用作导出类。正常的只需要一个index.ts即可，但发布的时候的文件和这个一样，所以就和发布的源代码的格式保持一致。

使用angular生成工具

在终端中输入

ng generate library your-library-name

例如
在这里插入图片描述
ng-cli 工具就会在 projects路径下创建你给定名字的包，默认包含一些配置文件和一个组件以及一个服务。

在这里插入图片描述
packageName/ng-package.json
根 ng-package.json文件

{"$schema": "../../node_modules/ng-packagr/ng-package.schema.json","dest": "../../dist/nexthub.asia-faker-ui2","lib": {"entryFile": "src/public-api.ts"}
}

其中dest 指定该包构建之后生成的发布包的位置。（相对于本文件的位置）
lib.entryFile 指定的是 public-api.ts 文件的位置，该文件用于导出一些类。

修改自己的package

可以直接修改为下面的形式
其中

"lib": {"entryFile": "public-api.ts"}

变更了文件路径，接下来会将该文件移到包nexthub.asia-faker-ui2下面

{"$schema": "../../node_modules/ng-packagr/ng-package.schema.json","dest": "../../publish","deleteDestPath": true,"lib": {"entryFile": "public-api.ts"}
}

然后进行如下操作

将代码文件拷贝到nexthub.asia-faker-ui2下
将默认生成的组件和服务也移到nexthub.asia-faker-ui2下
将生成的src/public-api.ts 移到nexthub.asia-faker-ui2下
将多余的空文件夹删除
创建两个ng-package.json分别放到nexthub.asia-faker-ui2/faker下和nexthub.asia-faker-ui2/faker/ui下，内容均为

{"lib": {"entryFile": "public-api.ts"}
}

经过上面几步后，包的路径就构建完成
在这里插入图片描述
接下来以 ui包举例
index.ts

export * from "./public-api"

ng-package.json

{"lib": {"entryFile": "public-api.ts"}
}

public-api.ts

export * from "./scroll-viewer/scroll-viewer";
export * from "./wrap-panel/wrap-panel"
export * from "./stack-panel/stack-panel"
export * from "./directives/scroll-viewer";
export * from "./directives/stack-panel";
export * from "./directives/wrap-panel";

简单来看，就是包下面又包含两个文件夹，文件夹中包含 ng-package.json所以也被认为应该编译的。编译的入口是

{"lib": {"entryFile": "public-api.ts"}
}

index.ts 文件看似只是又导出了public-api.ts,实际上没有这个文件，安装该包后，无法使用任何public-api.ts导出的类。

编译并发布

编译信息在 nexthub.asia-faker-ui2/package.json中指定，每一次发布时，可以修改版本号version,然后再构建发布。
导航到package根目录，并执行
ng build nexthub.asia-faker-ui2
在这里插入图片描述
构建成功就会出现在publish文件夹中

然后导航到 publish执行发布指令即可。