javascript - 为 React 组件库使用 Rollup

Question

我开始学习一些关于捆绑的知识，因为我正在更新一个使用 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功能不是解决此问题的理想解决方案，我真的不喜欢拥有 block 文件。

感谢您的帮助!

Answer 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捆绑时从您的库中获取。但是将这些选择留给您的用户和他们选择的捆绑器。
现在，您可以使用您的 files和 main package.json 中的声明允许多种类型的导入。如果设置 main指向您的index.js , 但包含 files 中的文件夹在导出组件的位置(例如，作为它们自己的 index.js 中的默认导出)，可以通过两种方式访问​​它们。
请注意，这仍然是完全多余的，并且可能有点不正统，并且可能会导致您的包裹实际上增加了大小。