使用 Turborepo 管理的 Monorepo 项目跨项目时如何共享代码

•6 min read
Web
Back

在上篇文章中介绍了 Turborepo 管理 Monorepo 项目中可以通过内部库（Internal Packages (opens in a new tab)）的方式共享代码。

如果在同一个 Monorepo 项目中使用的，那么内部库就足够了，但是如果遇到多个项目同时需要使用公共的代码，那么就会需要考虑外部库（External Packages (opens in a new tab)），相较于内部库而言，外部库会经过打包、发布版本、推送到一个集中的 npm 仓库提供给不同的项目使用，在跨项目使用的场景下使用，比如团队内基础组件库。

本文介绍使用 Turborepo (opens in a new tab) 管理的 Monorepo 项目跨项目时如何共享代码，主要介绍外部库的打包和发布版本方式。

打包项目

发布到 npm 仓库的包都需要提前打包，使用者不需要直接引用源码，不需要知道实现细节可以直接使用，也避免了出现不同项目打包工具和配置不一样导致的打包问题。目前主流的打包工具都支持打包出 ECMAScript modules (esm) (opens in a new tab) 和 CommonJS modules (cjs) (opens in a new tab)，主流的项目脚手架和打包工具也都支持引入和打包这两种格式的第三方包。

目前主流的打包工具有 Webpack, Vite, Rollup 等，有各自的优劣势，本文将介绍使用 tsup (opens in a new tab) 打包项目，是 Turborepo 文档 Bundling packages in a Monorepo – Turborepo (opens in a new tab) 中推荐的，支持 .js, .json, .mjs, .ts, .tsx 格式的文件的无配置打包，在小项目中上手使用十分方便快速。

以下目录结构为例，我们创建了一个库 math-helpers，并希望将他打包后发布

├── apps
│   └── web
│       └── package.json
├── packages
│   └── math-helpers
│       ├── src
│       │   └── index.ts
│       ├── tsconfig.json
│       └── package.json
├── package.json
└── turbo.json

安装 tsup

npm i tsup -D

定义打包命令

在 /packages/math-helpers/package.json 中定义打包命令，直接使用 tsup 打包 src/index.ts 的入口文件，并且导出 cjs,esm 格式和自动生成的类型定义

{
  "scripts": {
    "build": "tsup src/index.ts --format cjs,esm --dts"
  }
}

将打包后的产物 dist 文件配置一下

  1. .gitignore 中忽略 dist，这部分不需要提交到 Git 项目
  2. 将打包后的产物地址 dist，添加到 turbo.json 中的 pipeline，Turborepo 可以帮我们缓存打包结果，加快下次打包
{
  "pipeline": {
    "build": {
      "outputs": ["dist/**"]
    }
  }
}
  1. 在 package.json 中定义文件入口
{
  "main": "./dist/index.js",
  "module": "./dist/index.mjs",
  "types": "./dist/index.d.ts"
}

更多 tsup 的使用方式可以参考 文档 (opens in a new tab)，或者参考使用其他打包工具，如 Vite (opens in a new tab)

发布项目

项目打包完成后，需要考虑如何发布版本到 npm 仓库。其中包含这几件事：

  1. 版本管理，Semantic Versioning (opens in a new tab) 还是 Calendar Versioning (opens in a new tab)
  2. 发布
  3. npm 仓库，私有还是公开

在前端社区也已经有不少最佳实践和好用的工具来帮助我们完成发布项目这一流程。本文将介绍的是 Turborepo 文档 Versioning and Publishing Packages in a Monorepo – Turborepo (opens in a new tab) 中推荐的 changesets (opens in a new tab) 这一工具和其推荐的发布流程。

安装并初始化

npm install @changesets/cli && npx changeset init

使用

初始化完成后，使用方式和流程基本就是以下三个命令。下面介绍下每个命令的作用

# Add a new changeset
changeset
 
# Create new versions of packages
changeset version
 
# Publish all changed packages to npm
changeset publish

添加更新说明

changeset

会生成一次更新说明，并且保存文件在项目中，可以执行多次，会生成多次更新说明，后续会根据这些更新说明来生成 CHANGELOG

当修改完成后，需要准备发布版本时

changeset version

会提供可交互的界面，选择需要发布的版本，按照 semver 规范，选择 patch, 'minor', 'major' 版本

这部分命令执行完后，会生成 CHANGELOG，和会自动更新 package.json 中的版本为正确的版本（需要提交到 Git），下一步即可发布到 npm 仓库

发布到 npm 仓库

changeset publish

这个命令代替了 npm publish 这个命令，会发布到 npm 仓库。（注意记得发布之前需要打包！！！）

发布完成后，其他项目既可以通过 npm install 的方式安装使用。在公司内部项目，一般都会使用内部 npm 仓库，如何发布到内部 npm 仓库是另一个话题，会在之后介绍。

参考链接

2024 © OXXD.RSS