前端跨项目复用组件

1. 发布 npm 包 或 npm i git+

# 安装git库做为包
npm i git+https://git.xxx.com/xxx.git#v1.1.1

# 私库可以创建 项目访问令牌(Project Access Tokens) 去install
npm i git+https://[令牌名]:[token]@git.xxx.com/xxx.git#v1.1.1

本地联调时可以使用 npm link

# 组件库目录。为当前项目创建全局连接
sudo npm link
# 目标项目。要使用的包指向全局连接
npm link [someProjectName]

# 组件库目录,删除全局连接
sudo npm unlink [someProjectName]
# 目标项目。删除全局连接
npm unlink [someProjectName]

优点:有版本控制;组件代码安全不混乱;复用方便。

缺点:调试时没有热更新;共用的组件们需单独成功项目,否则 dependencies 是个问题;

// webpack 调试时热更新
{
  cache: false,
  devServer: {
    watchFiles: {
      paths: ['**/node_modules/要调试的包/**']
    }
  }
}
// vite
  export default defineConfig({
  server: {
    watch: {
      ignored: ['!**/node_modules/your-package-name/**'],
    },
  },
  // 被监听的包必须被排除在优化之外,
  // 以便它能出现在依赖关系图中并触发热更新。
  optimizeDeps: {
    exclude: ['your-package-name'],
  },
})

2. Monorepo 单仓多包

常见工具包 依赖管理 版本管理 跨端复用缓存
Pnpm Workspace 🚫 🚫 本身支持单体仓库的。没有幽灵依赖和依赖分身问题,这在 Monorepo 中很重要
Rush(4.7k star) ✅(by pnpm) 微软开源,内置 PNPM 以及类 Changesets 发包方案,其插件机制是一大亮点
Turborepo(18k) 🚫 🚫 专注于[任务编排],不包含依赖、版本管理的高性能构建系统
Lerna 🚫 原作者放弃维护,Nx 接手中...
  • Changesets 版本及 Changelog 管理的工具

  • 前三项都支持局部任务(只构建必须的部分)

pnpm

npm 命令 pnpm 等价命令
npm install pnpm install
npm install 包名 pnpm add 包名
npm uninstall 包名 pnpm remove 包名
npm run 脚本 pnpm 脚本

所有包安装在全局统一位置,项目以软/硬链接的方式使用,节省硬盘空间和安装时间。node_modules 为非平铺式的,所以不会出现幽灵依赖或依赖分身:

  • 幽灵依赖:项目代码调用了没有安装过的包(eg: dependencies A 依赖了 B,项目中可以直接使用 B,当项目删除 A、或者更换了非平铺式的包管理器时,会报缺少 B 依赖错误,且开发者不能明确 B 使用的版本。更严重情况是,其它开发者明确安装了 B,但版本与 A 的依赖不同,这时 B 版本有可能依赖安装顺序,即不是确定性的,如果在部署时报错还好,否则就会出现一些不好定位和复现的 BUG)

  • 依赖分身:依赖的依赖(比如 B)被重复安装,如果 B 有缓存或副作用,使用结果可能会不符合预期(eg: A 和 C 依赖 B@1.0,M 和 N 依赖 B@2.0,此时只有一个版本的 B 会被提升,另一个版本会被安装两次)

  • 依赖地狱:老版本的 npm v3 以下也是非平铺式的,也是当作笑话讲的依赖地狱


    npm 依赖地狱

    pnpm 会在 node_modules 下创建.pnpm文件夹,被依赖的包会以软连接或硬连接的方式指向资源。

    • 软连接 Symbolic link:也称符号链接,可以理解为快捷方式,一个写有目标地址的文件
    • 硬连接 Hard link:Linux 中一切皆文件,每个文件有一个自己的编号,称为索引节点,所谓的文件名就是一个系统级别的指向索引节点的指针,所以硬连接可以理解为源文件的别名
      依赖以软连接或硬连接的方式指向资源

pnpm 版本与 node 版本对应关系(兼容情况)https://www.pnpm.cn/installation#%E5%85%BC%E5%AE%B9%E6%80%A7

其它与 npm 的区别

  • 不依赖 Node
  • 与 npm 共用.npmrc配置
  • 支持 workspacefilter 参数
  • 据说 electron 不支持 软连接,所以 electron 项目不能使用 pnpm?

Turborepo

# 安装并运行CLI(node 16+?)
npx create-turbo@latest
? 问项目名
? 问包管理器
# 此命令初始化的项目带有示例包
// turbo.json
{
  "$schema": "https://turbo.build/schema.json",
  "pipeline": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": ["dist/**", ".next/**"] // 命令完成后放入缓存的目录
    },
    "lint": {
      "outputs": []
    },
    "dev": {
      "cache": false
    },
    "web#dev": {
      "dependsOn": ["^build"] // 注意 process.env.NODE_ENV 的值
    }
  }
}
// package.json
  "scripts": {
    "build": "turbo run build", // 这些命令需要在pipeline中定义过
    "dev": "turbo run dev",
    "lint": "turbo run lint"    // turbo会查找每个工作区的lint脚本并运行它们
  },
  "workspaces": [               // 工作区目录
    "apps/*",
    "packages/*"
  ],
  "workspaces": {               // 子项目不需要全局安装的包
    "nohoist": [
      "@types/react",           // 比如vue react混写时,这两个包会影响ts语法检测
      "@types/react-dom"        // 导致vue项目打包失败
    ]
  },

关于缓存:

  • 当第二次根目录运行npm run lint时,代码没有改变包,turbo 将读取缓存,不再重新执行

  • turbo 会缓存项目构建结果(build.outputs

  • 使用cache: false禁用缓存,比如在 dev 命令中

# 只调试一个项目
npm run dev -- --filter [包名] --filter [包名]
# 只调试 最近提交中有更改的包
turbo run dev --filter=[HEAD^1]

# 忽略缓存,全部重新执行
turbo run build --force

自定义远程缓存

turbo run build --api="https://my-server.example.com" --token="xxxxxxxxxxxxxxxxx"

如果全部缓存了,那到了生产服务器不就下载一下么,即不会真的在服务器上打包,这样到底好不好,得看需求

my-server.example.com官方例子是用 go 写的,看着还有点麻烦

Rush 一个功能全面的庞大的库

3. Bit 一个开源的组件平台

比较庞大,包含 WIKI、设计(原型?)、组件统计和分析等等,它甚至支持微服务架构、无服务器功能、CLI 实用程序、桌面应用程序、原生移动应用程序等等

创建组件还附带一些脚手架。免费版本提供的功能有限。

目前,这个庞大的东西对于我们成本太高

4. Lerna


【目前官方例子运行不起来,网络上有 Lerna 停止维护的传言,GITHUB 上标识维护权限转移给了别人,反正目前比较混乱吧】


针对使用 git 和 npm 管理多软件包代码仓库的一种工具。它可以将不同项目链接起来,并管理它们的发布。

本质上还是方法 1,但省去了 link,依然没有热更新

npm install --global lerna

# 将一个 GIT 仓库转变为一个 Lerna 仓库
lerna init

# 一个标准的 Lerna 仓库目录:
|- packages/
|- package.json
|- lerna.json

package.json中的workspaces: ["packages/*"]批向 Lerna 的工作区(项目列表)目录。packages下的项目们使用dependencies: { "package1": "*" }相互引用。

其它命令:

# 配置工作区,会输出 nx.json
npx lerna add-caching
? Which scripts need to be run in order? # 哪些指令会导致全局构建
❯◉ build
 ◯ test
 ◯ dev
 ◯ start
? Which scripts are cacheable? # 哪些指令可以被缓存
❯◉ build
 ◯ test
 ◯ dev
 ◯ start
? Does the "build" script create any outputs? If not, leave blank, otherwise provide a path relative to a project root (e.g. dist, lib, build,
coverage) # 输出目录
❯dist

# 安装包,packages中重复的包不会被再安装
npm i
# 打包工作区所有项目(按彼此引用顺序)
npx lerna run build
# 打包某个项目
npx lerna run build --scope=package1

# 创建一个新版本,并发布到npm
#    确定当前版本 -> 更新有变化的项目version -> 提交变更并打tag -> 发布到npm
lerna publish

# 检查自上次发布以来哪些软件包被修改过。
lerna changed

# 列出所有或某个软件包自上次发布以来的修改情况。
lerna diff [package?]

# 在每一个包含 [script] 脚本的软件包中运行此命令
lerna run [script]

# 列出所有公共软件包
lerna ls
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,734评论 6 505
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,931评论 3 394
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,133评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,532评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,585评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,462评论 1 302
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,262评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,153评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,587评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,792评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,919评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,635评论 5 345
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,237评论 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,855评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,983评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,048评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,864评论 2 354

推荐阅读更多精彩内容