React 组件库 - 是否需要捆绑器？

Question

创建 React 组件库时是否需要诸如 rollup 之类的捆绑器？\n即 如果我拥有的只是一个简单的项目，其中包含按钮/复选框等作为打字稿文件，然后在 npm 上发布，那么使用正确的配置运行 tsc 的 \xe2\x80\x99t 是否会将其全部转换为 dist 包？

\n

那么rollup有什么好处呢？我读到树摇晃可能是这样，但是如果js文件位于它们自己的目录中，那么下面的\xe2\x80\x99t也导入单个组件吗？

\n

Import { Button } from \xe2\x80\x98myLibrary/buttons\xe2\x80\x99\n

\n

Answer 1

简短的回答是否定的，不一定需要捆绑器。

捆绑器是一个方便的工具，可以为您完成大量转译和移动文件的繁琐工作。就您而言，如果您有一组简单的 ts 或 tsx 文件，并且您只是想以 1 对 1 的方式将它们转译为 js（每个 ts 文件有 1 个新的 js 文件，具有相同的名称），您绝对可以只需用于tsc转译您的文件，将它们输出到某个build目录，然后发布即可。这是使用打字稿创建反应组件库的完全有效的方法。

另一方面，如果事情比一对一的 ts 到 js 转换更复杂，那么捆绑器可能会派上用场。例如，如果您的库包含样式表、图像、Web Worker 文件等其他资源，则 tsc 将无法为您提供帮助。您需要手动将文件复制到构建目录中所需的位置。或者您可以使用捆绑器将它们捆绑在一起归档。或者，正如另一个答案提到的，您可能希望使用特定的 babel 转换来实现特定的兼容性，这可以使用捆绑器轻松配置。您可能想要做更多复杂的事情，例如代码分割，或相反（将许多输入文件放入单个输出） - 捆绑器可以帮助解决这个问题，而tsc不能。

我最近发现自己使用捆绑器来制作 React 组件库，但我切换了使用方式tsc，因为这是一个简单的场景，而且我更喜欢 TypeScript 的输出。