在 npm/yarn 工作空间中，包应该使用 src 还是 dist

Posted 2023-02-16

【中文标题】在 npm/yarn 工作空间中，包应该使用 src 还是 dist

【英文标题】：In npm/yarn workspaces, should packages consume src or dist

【发布时间】：2021-05-01 07:11:43

【问题描述】：

我想为我们的前端应用使用 monorepo。我们想将一些 React UI 组件划分到“/packages/ui-components”下的包文件夹中，并将应用程序留在“/apps/app”文件夹中，然后让应用程序通过导入来使用 ui-components（简化设置） .我们不打算在短期内将这些包发布到单个 npm 存储库，但只是让最终的应用程序运行。

我开始有点担心我们如何才能拥有最好的工作流程，但由于某种原因，我在我的研究中找不到这个：

应用程序应该使用包中的 src 文件，还是将每个包编译到 dist 文件夹并仅导入这些文件？

在工作流程方面，我们希望在不同的包中无缝工作，因此如果有人在包中进行编辑，我们希望这些更改立即显示在应用程序中。

与使用 dist 输出相比，我看到使用源文件的一些优点和缺点。

直接使用 src 的优点：

更好的 tree-shaking，因为依赖关系可以是对等依赖关系，并且可以组合多个包使用的库。 由于 webpack 可以更好地访问原始数据（如完整的依赖树和常用函数等），最终包的大小更小。 较小的项目更快的开发迭代，因为只有一个构建，智能 webpack 可能只重新编译几个更改的文件。

使用 dist 的优点：

更多独立的包，因为它们可以包含自己的构建管道。 将更容易导入，因为需要较少的对等依赖项和特殊的 webpack-config 准备作为公共 npm 包发布 可能构建时间更快，因为只有更改的包和主应用程序需要根据更改重新编译（我假设 webpack 可以进行缓存，所以这可能无关紧要）

我确定我遗漏了很多细节；如今，建立良好的开发流程非常复杂，我想让我的同事尽可能简单地使用它..

TL;DR;

应该将 mono-repo 中的包构建到他们的 dist 以供其他人使用，还是直接从 src 导入更好。

【参考方案1】：

这是一个权衡的问题。

如果您使用 dist 的包，这意味着为了“应用”您需要构建的包内的更改，然后在 app 中使用它。

有些人甚至建议将包发布到注册表（公共或私有），这可以让您在应用程序和包之间实现更松散的耦合。

另一方面，在 src 上工作具有“似乎不那么”的优势，但需要您的应用设置来支持它，因为它将是编译包代码的那个。

就我个人而言，我使用的是第二种方法，我的应用程序正在使用 src，并且配置起来并不是那么简单，因为必须的工具默认忽略来自 node_modules 的代码（就像 babel- loader，它将忽略 node_modules 中的代码转换。

我的大部分代码都是基于next-transpile-modules 源代码。

【讨论】：

“就像 babel-loader，它会忽略 node_modules 中的代码转换” 我已经花了好几个小时了！我遇到了 Lerna Workspaces+webpack-dev-server 问题...非常感谢！