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

如何解决在 npm/yarn 工作区中，包应该使用 src 还是 dist

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

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

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

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

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

直接使用 src 的优点：

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

使用 dist 的优点：

• 更多独立包，因为它们可以包含自己的构建管道。
• 导入更容易，因为对等依赖更少，并且需要特殊的 webpack-config
• 准备作为公共 npm 包发布
• 构建时间可能更快，因为只有更改的包和主应用程序需要在更改时重新编译（我认为 webpack 可以进行缓存，所以也许这并不重要）

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

TL;DR;

是否应该将单一存储库中的包构建到他们的 dist 中供其他人使用，还是直接从 src 导入更好。

解决方法

这是一个权衡问题。

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

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

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

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

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