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

创建react组件库时是否需要诸如rollup之类的绑定器？ 也就是说，如果我所拥有的只是一个简单的项目，带有按钮/复选框等类型的脚本文件，然后在npm上发布，那么运行带有适当配置的tsc是否会将其全部转换为dist bundle

那么，汇总的优势是什么？我读到可能是树震动，但是如果js文件位于它们自己的目录中，下面的不是也导入了一个组件吗

Import { Button } from ‘myLibrary/buttons’

---

您可以使用rollup以获得更广泛的兼容性

绑定器是使用尚未普遍实现的JavaScript特性所必需的。既然您发布的是一个库而不是一个web应用程序，我认为捆绑程序就不那么重要了，但也不是不可能的。例如，ES6模块（

导入

和

导出

）不受普遍支持（Typescript 1.5+，Node 13+）。Rollup可以确保更通用的兼容性，尤其是与诸如

Babel

之类的工具搭配使用时。它是一款开箱即用的产品，旨在：

…JavaScript的ES6修订版，其中包括用于导入和导出函数和数据的语法，以便它们可以在单独的脚本之间共享。该规范现在已经确定，但它只在现代浏览器中实现，没有在Node.js中最终确定。Rollup允许您使用新的模块系统编写代码，然后将其编译回现有支持的格式，如CommonJS模块、AMD模块和IIFE样式脚本。这意味着你可以写未来的证明代码

---

请注意，对于React库，大多数使用者将满足在不进行任何绑定器转换的情况下使用库的最低要求。

简单的回答是否，不一定需要绑定器

bundler是一个方便的工具，它可以为您完成大量繁重的文件传输和移动工作。在您的例子中，如果您有一组简单的ts或tsx文件，并且您只想以1:1的方式将它们传输到js（每个ts文件都有一个新的js文件，名称相同），那么您完全可以使用

tsc

来传输您的文件，将它们输出到某个

build

目录，然后发布该文件。这是使用typescript创建react组件库的一种完全有效的方法

另一方面，如果事情比1:1 ts到js的转换更复杂，那么绑定器可能会派上用场。例如，如果您的库包含样式表、图像、web worker文件等其他资源，tsc将不会在这方面帮助您。您需要手动将文件复制到构建目录中所需的位置。或者，您可以使用绑定器将它们绑定到您的文件中。或者，正如另一个答案所提到的，您可能希望使用特定的babel转换来实现特定的兼容性，这可以通过绑定器轻松配置。您可能想做更多涉及的事情，比如代码拆分，或者相反的事情（将许多输入文件放入一个输出中）-bundler可以提供帮助，其中

tsc

cant

---

我最近发现自己在使用bundler制作react组件库，但我改用了

tsc

，因为这是一个简单的场景，我更喜欢typescript的输出。

我喜欢这个答案，但它让我思考：这与正确使用tsconfig中的

target

属性之间的功能区别是什么？如果我可以

target

我的代码仅从tsconfig编译到es5，这难道不意味着tsc在这方面具有与捆绑机相同的功能吗？巴贝尔根本不是一个捆绑机all@Roberto，我没说是，但谢谢你澄清。@Seth，也许在这方面，是的。汇总将使您能够更好地控制输出的外观。这就是说，

tsc

本身已经具备了相当多的功能。