汇总React库输出多个构建文件夹？

Question

我用rollup创建了一个React库，但是，我导出了很多组件，因此文件大小相对较大。

所以在导入库的项目中，执行以下操作；

import { ComponentExampleOne, ComponentExampleTwo } from 'my-react-library';

它会导入通过汇总输出的整个索引文件（包括所有其他组件和任何第三方依赖关系），因此，当用户首次使用上面的导入项访问页面时，他们需要下载整个文件，这比我要大得多。希望如此。

对于lodash之类的地方，我只想访问一个函数而不是整个库，我将执行以下操作；

import isEmpty from 'lodash/isEmpty';

我想通过汇总实现类似的功能，所以我可以做类似的事情

import { ComponentExampleOne } from 'my-react-library/examples';
import { ButtonRed } from 'my-react-library/buttons';

因此，我只导入在index.js和examples文件夹中的buttons文件中导出的内容，这是我库中的文件夹结构。

my-react-library/
-src/
--index.js
--examples/
---ComponentExampleOne.js
---ComponentExampleTwo.js
---ComponentExampleThree.js
---index.js
--buttons/
---ButtonRed.js
---ButtonGreen.js
---ButtonBlue.js
---index.js

我不知道要通过汇总来实现吗？

这是我当前的rollup.config.js

import babel from 'rollup-plugin-babel';
import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import postcss from 'rollup-plugin-postcss';
import filesize from 'rollup-plugin-filesize';
import localResolve from 'rollup-plugin-local-resolve';
import json from 'rollup-plugin-json';
import pkg from './package.json';
import externals from 'rollup-plugin-node-externals';
import builtins from 'rollup-plugin-node-builtins';
import globals from 'rollup-plugin-node-globals';
import image from 'rollup-plugin-inline-image';
import { terser } from 'rollup-plugin-terser';

const config = {
  input: 'src/index.js',
  watch: {
    chokidar: {
      usePolling: true,
      paths: 'src/**'
    }
  },
  output: [
    {
      file: pkg.browser,
      format: 'umd',
      name: 'Example'
    },
    {
      file: pkg.main,
      format: 'cjs',
      name: 'Example'
    },
    {
      file: pkg.module,
      format: 'es'
    },
  ],
  external: Object.keys(pkg.peerDependencies || {}),
  plugins: [
    globals(),
    builtins(),
    externals(),
    babel({ exclude: 'node_modules/**', presets: ['@babel/env', '@babel/preset-react'] }),
    commonjs({
      include: "node_modules/**",
      namedExports: {
        // left-hand side can be an absolute path, a path
        // relative to the current directory, or the name
        // of a module in node_modules
        'node_modules/formik/node_modules/scheduler/index.js': ['unstable_runWithPriority'],
      }
    }),
    peerDepsExternal(),
    postcss({ extract: true }),
    json({ include: 'node_modules/**' }),
    localResolve(),
    resolve({
      browser: true,
      dedupe: ['react', 'react-dom'],
    }),
    filesize(),
    image(),
    terser()
  ]
};

export default config;

任何帮助将不胜感激。

Answer 1

如果您使用命名出口和任何现代捆绑程序来构建应用，则实际上并不需要这样做。当汇总检测到您不使用某些导出时，由于tree-shaking，它将被删除。

如果仍要执行此操作，则将具有不同条目的对象传递给input选项：

// ...
const config = {
  input: {
    examples: 'examples/entry/file.js',
    buttons: 'buttons/entry/file.js'
  },
  // ...
}