javascript - 为 React 组件库使用 Rollup
问题描述
我开始学习一些关于捆绑的知识,因为我正在更新一个使用 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
功能并不是解决此问题的理想解决方案,而且我不太喜欢拥有块文件。
感谢您的帮助!
解决方案
我会说将这种优化留给主机应用程序。让你的包裹变小,但使用起来并不陌生。如果您启用静态 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
捆绑时,用户可以从您的库中摇动。但是将这些选择留给您的用户和他们选择的捆绑器。
现在,您可以使用您的files
andmain
声明package.json
来允许多种类型的导入。如果您设置main
指向您的index.js
, 但包含files
导出组件的文件夹(例如,作为它们自己的 index.js 中的默认导出),则可以通过两种方式访问它们。
请注意,这仍然是完全多余的,并且可能有点不正统,并且可能会导致您的包裹实际上增加了大小。
推荐阅读
- javascript - HighChart - 如何在 HighChart Print 中应用覆盖字幕样式 css
- node.js - 为什么 array.push() 在我的 Mongoose 模型中不起作用?
- angular - *ngIf 到底在做什么?
- c++ - 如何从基类动态创建和使用派生类?
- python-3.x - 使用 python 和 boto 按实例列出所有 T2 实例类型和 cpucredits
- java - 带有 Google Play 服务登录的 Libgdx
- html - 只有我导航栏中的最后一个链接有效,其余链接甚至在悬停时都不会改变
- java - Java Scanner 线程“主”异常错误
- python - Keras元素变量乘法错误?
- java - 自定义 FirebaseMessagingService 被忽略