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

问题描述 投票:0回答:1

我用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.jsexamples文件夹中的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;

任何帮助将不胜感激。

reactjs rollup rollupjs
1个回答
0
投票

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

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

// ...
const config = {
  input: {
    examples: 'examples/entry/file.js',
    buttons: 'buttons/entry/file.js'
  },
  // ...
}
© www.soinside.com 2019 - 2024. All rights reserved.