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

Question

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

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

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

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

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

直接使用 src 的优点：

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

使用 dist 的优点：

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

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

TL;博士;

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

Answer 1

It is a matter of tradeoffs.

If you consume dist of your packages, this means that in order to "apply" changes inside your package you need to build, then consume it in the app.

Some even suggest publishing the package to the registry (public or private), this allows you more loose coupling between the app and the packages.

另一方面，在 src 上工作具有“似乎较少”的优点，但需要您的应用程序设置来支持它，因为它将是编译包代码的地方。

就我个人而言，我使用的是第二种方法，我的应用程序正在使用src，并且配置起来并不是那么简单，因为大多数工具node_modules默认情况下都会忽略代码（例如 babel-loader，它将忽略内部代码的转译）node_modules）。

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