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语句中引入这两个组件而没有其余的库？

注释

该库当前使用汇总，但如果有更简单的解决方案，我认为我们不需要。
我觉得使用experimentalCodeSplitting功能不是理想的解决方案，而且我真的不喜欢拥有块文件。

感谢您的帮助！

将汇总用于React组件库

0 个答案: