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

Question

我已经创建了一个 React 库rollup，但是，我有大量的组件被导出，因此文件大小相对较大。

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

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

它导入通过汇总输出的整个索引文件（包括所有其他组件和任何 3rd 方依赖项），因此当用户第一次点击上面导入的页面时，他们需要下载整个文件，这比我想要的要大得多它是。

对于lodash我只想访问单个函数而不是整个库的情况，我会执行以下操作；

import isEmpty from 'lodash/isEmpty';

我想通过 rollup 实现类似的功能，这样我就可以做类似的事情

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

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

如果您仍然想这样做，则将具有不同条目的对象传递给该input选项：

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