发布一个angular的npm包(包含多个模块)

为什么要发布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生成工具

在终端中输入

bash 复制代码
ng generate library your-library-name

例如

ng-cli 工具就会在 projects路径下创建你给定名字的包,默认包含一些配置文件和一个组件以及一个服务。

packageName/ng-package.json

根 ng-package.json文件

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

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

其中

json 复制代码
"lib": {
    "entryFile": "public-api.ts"
  }

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

json 复制代码
{
  "$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下,内容均为
json 复制代码
{
  "lib": {
    "entryFile": "public-api.ts"
  }
}

经过上面几步后,包的路径就构建完成

接下来以 ui包举例
index.ts

typescript 复制代码
export * from "./public-api"

ng-package.json

json 复制代码
{
  "lib": {
    "entryFile": "public-api.ts"
  }
}

public-api.ts

typescript 复制代码
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所以也被认为应该编译的。编译的入口是

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执行发布指令即可。

发布成功

安装你的包之后就可以在另外的项目中使用

并且导入的路径和ng-zorro-antd类似,最多只有2层(包含项目本身)

参考资料
ng-zorro-antd

相关推荐
YGY Webgis糕手之路1 分钟前
OpenLayers 快速入门(九)Extent 介绍
前端·经验分享·笔记·vue·web
患得患失9493 分钟前
【前端】【vueDevTools】使用 vueDevTools 插件并修改默认打开编辑器
前端·编辑器
ReturnTrue8684 分钟前
Vue路由状态持久化方案,优雅实现记住表单历史搜索记录!
前端·vue.js
UncleKyrie9 分钟前
一个浏览器插件帮你查看Figma设计稿代码图片和转码
前端
遂心_12 分钟前
深入解析前后端分离中的 /api 设计:从路由到代理的完整指南
前端·javascript·api
你听得到1121 分钟前
Flutter - 手搓一个日历组件,集成单日选择、日期范围选择、国际化、农历和节气显示
前端·flutter·架构
风清云淡_A28 分钟前
【REACT18.x】CRA+TS+ANTD5.X封装自定义的hooks复用业务功能
前端·react.js
@大迁世界30 分钟前
第7章 React性能优化核心
前端·javascript·react.js·性能优化·前端框架
前端Hardy1 小时前
HTML&CSS:惊艳!科技感爆棚的登录页面代码解析
前端·javascript·html
我是哈哈hh1 小时前
【AJAX项目】黑马头条——数据管理平台
前端·javascript·ajax·前端框架·axios·proxy模式