使用 React 组件库的 Rollup

Question

我开始学习一些关于捆绑的知识，因为我正在更新一个使用 Rollup 的小型内部 React 组件库。

现状

现在，所有组件都被捆绑到一个

index.js

文件中。每当我导入一个或多个...

import { Button, Input } from 'my-library';

...整个库正在导入。我想解决这个问题。

此时，我已更新 Rollup 以创建命名组件文件，这样我就可以像这样进行导入：

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

   功能并不是理想的解决方案，而且我不太喜欢拥有块文件。

感谢您的帮助！

Answer 1

我想说将此类优化留给主机应用程序。让你的包变小，但使用起来并不奇怪。如果您启用静态 ES6 导入，则它们可以在主机捆绑时进行树状摇动。

如果您导出

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 中的默认导出），则可以通过两种方式访问它们。

请注意，这仍然是完全多余的，并且可能有点不正统，并且可能会导致您的包实际上增加尺寸。

Answer 2

您可以在发布之前使用

rollup-plugin-tree-shakeable

来处理您的库。该插件通过自动向代码中的所有顶级表达式添加@__PURE__

注释

来解决问题，以防止树摇动，假设您的包实际上是纯的，但捆绑器需要对此有一点说服力。

// ...
plugins: [
  // ...
  treeShakeable(),
],
// ...

警告： 仅当您的包实际上是可树摇动的时才使用此插件，这意味着如果所有其他导出都被删除，每个导出仍然可以正常运行。该插件不会为您的包提供该属性。它只会让捆绑商相信情况确实如此。