Rollup React Library Output Multiple Build Folders?

Question

I have created a React Library with rollup , however, I have a large number of components that get exported so the file size is relatively large.

So in a project where I import the library doing the following;

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

It imports the whole index file outputted via rollup (including all other components and any 3rd party dependencies), so when a user first hits the page with the import above they need to download the whole file, which is a lot bigger than I would like it to be.

For the likes of lodash where I just want to access a single function and not the entire library, I would do the following;

import isEmpty from 'lodash/isEmpty';

I want to achieve similar functionality with rollup so I can do something like

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

So I only import what is exported in the index.js file within an examples and buttons folder with this is as my folder structure in my library.

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

I have no idea to achieve this with rollup?

This is my current 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;

Any help would be greatly appreciated.

Answer 1

You don't really need to do that if you use named exports and any modern bundler for building the app. When Rollup detects you are not using some export it will be removed due to tree-shaking .

If you still want to do it pass an object with the different entries you want to the input option:

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