我们应该在 lerna monorepo 中单独捆绑共享组件库吗？

Question

我在标准 lerna monorepo 中有三个包。

1. 客户
2. 反应库
3. 核

核心 - 是一个带有一些实用程序的共享组件库（可能会或可能不会在 npm 上发布）。 React 库是组件库，将在 npm 上共享。 client 是一个捆绑的 js 库，将在浏览器中使用 static html 文件。

core 是 react-lib 和客户端的依赖项

问题 1 - 如何设置核心，我是否应该使用 tsc 进行编译并与 rollup 或 vite 等工具捆绑（我个人更喜欢 vite/rollup 而不是 webpack）。 还是保持原样并将其导入客户端并使用绝对路径（如“core/src/*”）将其导入 react-lib？

问题 2 - 我可以像使用 cra 或 vite 的普通反应应用程序一样以“es”格式构建核心并构建客户端。 我试过了，但我认为我错过了一些东西，因为最终捆绑包似乎在浏览器中不起作用。

任何帮助将非常感激。

Answer 1

您有几个问题，我可能无法全部回答，但希望足以指导您找到所需的解决方案。

核心 - 是一个带有一些实用程序的共享组件库（可能会或可能不会在 npm 上发布）。

如果您想使用 Lerna，那么我想您最终必须在 npm 或私有存储库上发布 package。 作为替代方案，您还可以使用 pnpm 工作区及其workspace:协议，它允许您链接工作区（monorepo）中的包，而无需从 npm 下载它们，例如，如果您使用workspace:*那么它将始终使用和链接到本地工作区中的最新代码。 您还可以将workspace:协议与 Lerna （或Lerna-Lite ）一起使用，因为它们都支持它。

对于您的下一个问题，我将首先回答您问题 1 的最后一部分，因为这会影响问题的其他部分。

问题 1：......或者只是保持原样并将其导入到客户端和 react-lib 中，使用绝对路径，如'core/src/*' ？

使用 package 之外的绝对路径不是一件好事，因为它仅适用于您的本地项目，并且您不能将其发布到 npm，因为它会被其他用户破坏。 最好坚持使用工作区，让 package 使用package.json中定义的main条目或exports条目。 换句话说，最好始终构建/转换并让您的其他 package 使用转换后的代码，如果您需要调试，请确保还包括源映射

问题 1：如何设置核心，我应该使用 tsc 进行编译并与 rollup 或 vite 等工具捆绑（我个人更喜欢 vite/rollup 而不是 webpack）

您使用 TypeScript、Rollup 或 WebPack 中的哪一个可能并不重要，在我的一个项目中，我使用 TypeScript 在监视模式下，如果您在监视模式下更改了更多的包，则缺点是自动转换更多的 TypeScript 线程在监视模式下打开（每个包 1x），但在你的情况下，如果你只有 3 个那么没关系，还有我正在关注的这个 TypeScript问题，它有望在未来带来多线程编译。 您也可以使用 Rollup，其概念是相同的，在每个 package 的手表模式下使用它（我已经使用vite build --watch完成了 Vite/Rollup，如下一段所述）。

您可以查看我使用 pnpm 工作区和工作区完成的项目Vue 3 和 pnpm 工作workspace:协议，它使用 Rollup 进行转译，还使用 Vite库模式，允许捆绑您的库进行分发（在 npm 或其他...)，这允许您将每个 package 捆绑为一个库，以便其他项目轻松重用。 这是一个 Vue 3 项目，所以它不是一个 React 项目，但它应该给你足够的关于如何在 React 中做的想法，它应该有助于回答你的问题 2。此外，该项目没有使用 Lerna/Lerna-Lite ，但因为它使用workspace:协议，那么将来在其上添加 Lerna 将非常容易（基本上只需添加lerna.json配置就足够了）