为 React 组件库使用 Rollup
Posted
技术标签:
【中文标题】为 React 组件库使用 Rollup【英文标题】:Using Rollup for a React Component Library 【发布时间】:2019-05-12 08:46:15 【问题描述】:我开始学习一些关于捆绑的知识,因为我正在更新一个使用 Rollup 的小型内部 React 组件库。
当前状态
现在,所有组件都被捆绑到一个index.js
文件中。每当我导入一个或多个...
import Button, Input from 'my-library';
...正在导入整个库。我想解决这个问题。
此时,我已更新汇总以创建命名组件文件,因此我可以像这样进行导入:
import Button from 'my-library/Button';
当我只使用一个组件时这很好,但每当我需要多个组件时,例如,必须从同一个库中导入五行代码,这感觉是多余的。但是每当我再次尝试解构它们时,都会导入整个库。
目标
我希望能够从上面运行相同的解构导入语句,但仅导入这两个组件。
rollup.config
export default
experimentalCodeSplitting: true,
input: [
'src/index.js',
'src/components/Button/Button.js',
'src/components/Input/Input.js',
],
output:
exports: 'named',
dir: 'dist/',
format: 'cjs',
chunkFileNames: 'chunks/[name]-[hash].js',
,
plugins: [
external(),
babel( exclude: 'node_modules/**', plugins: ['external-helpers'] ),
resolve(),
commonjs(),
],
;
index.js
import Button from './components/Button/Button';
import Input from './components/Input/Input';
exports.Button = Button;
exports.Input = Input;
所以这会导致为每个组件构建两个文件,Button.js
和 Input.js
,这很棒。但是是否可以在一个 import
语句中引入这两个组件而无需库的其余部分?
备注
该库目前使用 Rollup,但如果有更简单的解决方案,我认为我们需要它。
我觉得使用 experimentalCodeSplitting
功能不是解决这个问题的理想解决方案,我不太喜欢使用块文件。
感谢您的帮助!
【问题讨论】:
你没有以正确的方式思考这个问题。您正在制作一个库,而不是一个应用程序。代码拆分是消费代码的责任,而不是你。如果您想提供整个库的精简精简包作为一种便利,那很酷,但任何更细粒度的东西都取决于您的用户。 @JaredSmith 很有趣。所以我的消费应用程序需要处理代码拆分。我只是通过使用 VS Code 扩展 ImportCost 进行粗略测试。当您提到“精简包”时,您的意思是什么? 您在整个库中提供了一个缩小的 tree-shook 捆绑 UMD,以便于使用,例如开发/实验/CDN,但来源是 ES6 模块。任何关心有效载荷大小的人都已经有了一个缩小/捆绑管道,他们都知道如何使用这些管道。他们可以只导入相关的源文件并在其上使用自己的工具。每个人都有自己喜欢的构建设置,让您的用户顺其自然。即使它仅供内部使用,构建过程也会发生变化。不要将它们不必要地耦合到您的 UI 库中。 @Yuschick 你是如何进行的?我正在经历同样的事情。除此之外,我希望将我的文件编译回 es5,因为通常将 node_modules 排除在转译之外并且从源代码中要求是不够的。 你解决了吗?尝试做同样的瘦。 【参考方案1】:我会说将这种优化留给主机应用程序。让你的包裹变小,但使用起来并不陌生。如果您启用静态 ES6 导入,则它们可以在主机捆绑时进行 tree-shaking。
如果你导出它
export default as Button from './components/Button/Button'
export default as Input from './components/Input/Input'
然后像这样导入
import Button from 'my-library';
捆绑时,用户可以从您的库中摇动 Input
。但将这些选择留给您的用户和他们选择的捆绑器。
现在,您可以在package.json
中使用您的files
和main
声明来允许多种类型的导入。如果您将main
设置为指向您的index.js
,但在导出组件的files
中包含文件夹(例如,作为它们自己的index.js 中的默认导出),则可以通过两种方式访问它们。
请注意,这仍然是完全多余的,并且可能有点不正统,并且可能会导致您的包裹实际上增加了大小。
【讨论】:
以上是关于为 React 组件库使用 Rollup的主要内容,如果未能解决你的问题,请参考以下文章
React + Antd + Rollup 组件库“错误:无效的钩子调用。钩子只能在函数组件的主体内部调用”
Rollup 和 Post CSS - 自动为 React className 属性添加前缀