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

Question

我已经用 rollup 创建了一个 React 库，但是，我有大量的组件需要导出，所以文件比较大。

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

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

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

对于 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

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

而被删除

如果您仍想这样做，请将包含您想要的不同条目的对象传递给 input 选项：

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

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

Rollup React Library Output Multiple Build Folders?

reactjs

rollup

rollupjs