pnpm或者npm v7的monorepo项目怎么进行本地开发调试?

Question

请问在创建monorepo时如何进行本地开发调试，我了解到创建monorepo项目的两种方式为pnpm、npm的workspace。
我创建了一个示例代码库 https://github.com/jervainy/demo-monorepo.git，
有两个工程，lerna-workspace-demo 采用npm workspace方式创建的monorepo项目;pnpm-workspace-demo 采用pnpm创建的monorepo项目。这两个项目中pkg0引用utils模块,采用vite打包。
当我将package.json中的main、module指向为lib/main.js时，utils中修改了内容后在pkg0中能马上刷新访问，但这会导致打包的文件不安全; 如果指向dist文件则不能实现热更新。如果将main指定为dist，怎样才能实现热更新？

开源项目tiptap https://github.com/ueberdosis/tiptap.git是采用的npm workspace创建的monorepo项目，package.json中main指向的dist文件，能进行热更新，采用的rollup打包; 请问为什么tiptap能实现热更新

我看过采用pnpm的项目，例如nuxt、vue3等，使用pnpm创建项目后同时也会在package.json中声明workspace，这是为什么，pnpm创建的monorepo项目如何实现热更新

Answer 1

对于pnpm或npm v7的monorepo项目的本地开发调试

当main指向dist时如何实现热更新

当你在一个monorepo项目中工作，并希望当utils模块的内容改变时，pkg0能够立即反映这些变化，同时确保打包文件的安全性（即不直接指向源码），你通常需要配置一个热更新（Hot Module Replacement, HMR）的环境。

对于Vite或Webpack这样的打包工具，它们通常内置了HMR功能。但是，为了使HMR工作，你需要确保：

1. 打包工具配置：你的打包工具（如Vite或Webpack）需要配置为支持HMR。
2. 开发服务器：你正在运行的开发服务器（如Vite的vite serve或Webpack的webpack-dev-server）需要支持HMR。
3. 代码分割：确保你的代码被正确地分割成模块，这样HMR才能替换单个模块而不是整个应用。
4. 依赖关系：在monorepo中，你需要使用符号链接（symlinks）来连接不同包之间的依赖，这可以通过npm workspaces或pnpm的workspace功能实现。

对于你提到的main指向dist的问题，理想情况下，你应该在devDependencies中包含构建和运行依赖，并且在scripts中定义一个开发脚本（如start），该脚本首先运行构建命令（如果需要的话），然后启动一个支持HMR的开发服务器。这样，当你修改utils模块时，开发服务器会重新构建pkg0（如果需要的话），并应用HMR。

为什么tiptap能实现热更新

tiptap能实现热更新很可能是因为它们配置了打包工具（可能是Rollup或其他支持HMR的工具）来支持HMR，并且它们的开发服务器也支持HMR。此外，tiptap可能使用了某种形式的代码分割和模块热替换策略，以确保只有更改的模块被重新加载。

为什么pnpm创建的monorepo项目也在package.json中声明workspace

pnpm和npm workspaces都使用符号链接来管理monorepo中的依赖关系。在pnpm中，你通常会在根目录的pnpm-workspace.yaml文件中定义workspace，但你也可以在package.json中通过workspaces字段来定义它。这样做的好处是与其他工具（如npm）的兼容性更好，并且提供了一种更明确的方式来声明你的monorepo结构。

对于热更新，无论是使用pnpm还是npm workspaces，关键都是配置你的打包工具和开发服务器来支持HMR。pnpm本身并不直接提供热更新功能，但它通过创建符号链接来支持monorepo中的包之间的依赖关系，这有助于HMR工作。

总结

• HMR配置：确保你的打包工具和开发服务器都配置为支持HMR。
• 依赖管理：使用npm workspaces或pnpm的workspace功能来管理monorepo中的依赖关系。
• 开发脚本：在package.json中定义开发脚本，以便轻松地启动支持HMR的开发服务器。
• 兼容性：考虑在package.json中明确声明workspace，以提高与其他工具的兼容性。