React 组件库 - 是否需要打包器?
React Component Library - Is a bundler needed?
创建react组件库需要rollup之类的bundler吗?
IE。如果我只有一个简单的项目 Buttons/Checkboxes 等作为打字稿文件,然后在 npm 上发布,运行 tsc 和适当的配置不会把它全部变成 dist 包吗?
那么rollup有什么优势呢?我读到 tree shaking 可能是这样,但是如果 js 文件位于它们自己的目录中,那么下面不也导入单个组件吗?
Import { Button } from ‘myLibrary/buttons’
您可以使用汇总以获得更广泛的兼容性。
捆绑器在使用 JavaScript 尚未普遍实施的功能时非常有用,因为它们简化了添加构建工具的过程,这些构建工具可以 polyfill/transpile 现代功能和语法以符合当前实施的网络标准。由于您发布的是库而不是 Web 应用程序,因此我认为捆绑器不太相关,但并非不可能。例如,ES6 模块(import
和 export
)并未得到普遍支持(Typescript 1.5+、Node 13+)。 Rollup 可以确保更通用的兼容性,尤其是与 Babel
等工具配对时。开箱即用,它内置于 "future proof code":
...the ES6 revision of JavaScript, which includes a syntax for importing and exporting functions and data so they can be shared between separate scripts. The specification is now fixed, but it is only implemented in modern browsers and not finalised in Node.js. Rollup allows you to write your code using the new module system, and will then compile it back down to existing supported formats such as CommonJS modules, AMD modules, and IIFE-style scripts. This means that you get to write future-proof code...
请注意,对于 React 库,大多数消费者将满足最低要求,无需任何捆绑器转换即可使用您的库。
简短的回答是否定的,不一定需要捆绑器。
捆绑器是一种方便的工具,可以为您完成大量转译和移动文件的繁重工作。在你的情况下,如果你有一组简单的 ts 或 tsx 文件,而你只是想将它们一对一地转换为 js(每个 ts 文件有一个新的 js 文件,同名),你绝对可以只需使用 tsc
转换您的文件,将它们输出到某个 build
目录,然后发布。这是使用 typescript 创建 React 组件库的完全有效的方法。
另一方面,如果事情比 1 对 1 ts 到 js 的转换更复杂,那么捆绑器可能会派上用场。例如,如果您的库包含样式表、图像、网络工作者文件等其他资源,则 tsc 将无济于事。您需要手动将文件复制到构建目录中您想要的位置。或者您可以使用捆绑器将它们捆绑在一起归档。或者,正如提到的另一个答案,您可能希望使用特定的 babel 转换来实现特定的兼容性,这可以通过捆绑器轻松配置。您可能想做更多复杂的事情,例如代码拆分,或相反(将许多入口文件合并到一个输出中)- 打包器可以提供帮助,其中 tsc
做不到。
我最近发现自己在使用 bundler 来制作一个 React 组件库,但我转而使用 tsc
因为这是一个简单的场景,而且我更喜欢 typescript 的输出。
创建react组件库需要rollup之类的bundler吗? IE。如果我只有一个简单的项目 Buttons/Checkboxes 等作为打字稿文件,然后在 npm 上发布,运行 tsc 和适当的配置不会把它全部变成 dist 包吗?
那么rollup有什么优势呢?我读到 tree shaking 可能是这样,但是如果 js 文件位于它们自己的目录中,那么下面不也导入单个组件吗?
Import { Button } from ‘myLibrary/buttons’
您可以使用汇总以获得更广泛的兼容性。
捆绑器在使用 JavaScript 尚未普遍实施的功能时非常有用,因为它们简化了添加构建工具的过程,这些构建工具可以 polyfill/transpile 现代功能和语法以符合当前实施的网络标准。由于您发布的是库而不是 Web 应用程序,因此我认为捆绑器不太相关,但并非不可能。例如,ES6 模块(import
和 export
)并未得到普遍支持(Typescript 1.5+、Node 13+)。 Rollup 可以确保更通用的兼容性,尤其是与 Babel
等工具配对时。开箱即用,它内置于 "future proof code":
...the ES6 revision of JavaScript, which includes a syntax for importing and exporting functions and data so they can be shared between separate scripts. The specification is now fixed, but it is only implemented in modern browsers and not finalised in Node.js. Rollup allows you to write your code using the new module system, and will then compile it back down to existing supported formats such as CommonJS modules, AMD modules, and IIFE-style scripts. This means that you get to write future-proof code...
请注意,对于 React 库,大多数消费者将满足最低要求,无需任何捆绑器转换即可使用您的库。
简短的回答是否定的,不一定需要捆绑器。
捆绑器是一种方便的工具,可以为您完成大量转译和移动文件的繁重工作。在你的情况下,如果你有一组简单的 ts 或 tsx 文件,而你只是想将它们一对一地转换为 js(每个 ts 文件有一个新的 js 文件,同名),你绝对可以只需使用 tsc
转换您的文件,将它们输出到某个 build
目录,然后发布。这是使用 typescript 创建 React 组件库的完全有效的方法。
另一方面,如果事情比 1 对 1 ts 到 js 的转换更复杂,那么捆绑器可能会派上用场。例如,如果您的库包含样式表、图像、网络工作者文件等其他资源,则 tsc 将无济于事。您需要手动将文件复制到构建目录中您想要的位置。或者您可以使用捆绑器将它们捆绑在一起归档。或者,正如提到的另一个答案,您可能希望使用特定的 babel 转换来实现特定的兼容性,这可以通过捆绑器轻松配置。您可能想做更多复杂的事情,例如代码拆分,或相反(将许多入口文件合并到一个输出中)- 打包器可以提供帮助,其中 tsc
做不到。
我最近发现自己在使用 bundler 来制作一个 React 组件库,但我转而使用 tsc
因为这是一个简单的场景,而且我更喜欢 typescript 的输出。