title: Using Rollup for a React Component Library
body: <p>I am beginning to learn a bit about bundling as I am working on updating a small, internal React component library which uses Rollup.</p>
  
  <p><strong>Current State</strong></p>
  
  <p>Right now, all of the components are being bundled down into one <code>index.js</code> files. And whenever I import one or multiple...</p>
  
  <pre><code>import { Button, Input } from 'my-library';
  </code></pre>
  
  <p>...the entire library is being imported. I would like to fix that.</p>
  
  <p>At this point, I have updated Rollup to create named component files so I can do imports like this:</p>
  
  <pre><code>import Button from 'my-library/Button';
  </code></pre>
  
  <p>That is fine when I am using just one component but whenever I need more than one, it feels redundant to have to have, for example, five lines of imports from the same library. But whenever I again try to destructure them, the entire library is imported.</p>
  
  <p><strong>The Goal</strong></p>
  
  <p>I would like to have the ability to run that same destructured import statement from above but <strong>only</strong> import those two components.</p>
  
  <p><strong>rollup.config</strong></p>
  
  <pre><code>export default {
    experimentalCodeSplitting: true,
    input: [
      'src/index.js',
      'src/components/Button/Button.js',
      'src/components/Input/Input.js',
    ],
    output: {
      exports: 'named',
      dir: 'dist/',
      format: 'cjs',
      chunkFileNames: 'chunks/[name]-[hash].js',
    },
    plugins: [
      external(),
      babel({ exclude: 'node_modules/**', plugins: ['external-helpers'] }),
      resolve(),
      commonjs(),
    ],
  };
  </code></pre>
  
  <p><strong>index.js</strong></p>
  
  <pre><code>import Button from './components/Button/Button';
  import Input from './components/Input/Input';
  
  exports.Button = Button;
  exports.Input = Input;
  </code></pre>
  
  <p>So this results in two files, <code>Button.js</code> and <code>Input.js</code> being built for each component which is great. But is it possible to bring in both components without the rest of the library in one <code>import</code> statement?</p>
  
  <p><strong>Notes</strong></p>
  
  <ul>
  <li><p>The library currently uses Rollup but I don't think we <em>need</em> it if there's an easier solution.</p></li>
  <li><p>I feel like using the <code>experimentalCodeSplitting</code> feature isn't the ideal solution for this and I don't really like having the chunk files.</p></li>
  </ul>
  
  <p>Thanks for helping out!</p>