CODEWITHSUNDEEP
reactjsrollupjs
james emanon
james emanon

Reputation: 11807

Rollup Build seems to be overly large for component library

I am using rollup (v2.13.1), and it all works fine exporting out my React Library, BUT, I believe that I am using the WHOLE library in my vendor js file and NOT just the components I am using. The library seems a bit large when I run tool analyze. Seems I'm not properly doing modules, or ?

package.json build command: "build": "rollup -c",

Here is my Rollup config, anything I am missing or doing incorrectly?

And I am using it in a seperate application like so:
import { Button, Icon } from "myReactLibrary";

CODE: Rollup Config

import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import resolve from 'rollup-plugin-node-resolve';
import typescript from 'rollup-plugin-typescript2';
import commonjs from 'rollup-plugin-commonjs';
import copy from 'rollup-plugin-copy';
import postcss from 'rollup-plugin-postcss';
const packageJson = require('./package.json');

export default {
  input: 'src/index.ts',
  output: [
    {
      dir: packageJson.main,
      format: 'cjs',
      sourcemap: true,
    },
    {
     dir: packageJson.module,
     format: 'esm',
     sourcemap: true,
   },
],
 plugins: [
   peerDepsExternal(),
   typescript({useTsconfigDeclarationDir: true}),
   resolve(),
   commonjs(),
   postcss({
    modules: true,
   }),
  copy({
    targets: [
      {
        src: 'src/styles/colors.scss',
        dest: 'build',
        rename: 'colors.scss',
      },
    {
      src: 'src/styles/helpers.scss',
      dest: 'build',
      rename: 'helpers.scss',
    },
    {
      src: 'src/styles/mixins.scss',
      dest: 'build',
      rename: 'mixins.scss',
    },
  ],
}),
 ],
};

And the "src/index.ts" file is:

  import Accordion from './Accordion/Accordion';
  import AccordionGroup from './Accordion/AccordionGroup';
  import Avatar from './Avatar/Avatar';
  import Button, {BUTTON_THEMES} from './Button/Button';
  import Checkbox from './Checkbox/Checkbox';
  import CheckboxGroup from './Checkbox/CheckboxGroup';
  import Form from './Form/Form';
  import {Size as ELEMENT_SIZE} from './base.types';
  import Grid, {BREAKPOINTS} from './Grid/Grid';
  import Icon from './Icon/Icon';
  import InputField from './Input/Input';
  import {LoaderComponent, LoaderPage} from './Loaders/Loaders';
  import Modal from './Modal/Modal';
  import Panel from './Panel/Panel';
  import PlainModal from './PlainModal/PlainModal';
  import Radio from './Radio/Radio';
   import RadioGroup from './Radio/RadioGroup';
  import SelectField from './SelectField/SelectField';
  import {SelectOptions, SelectArrayOptions, SelectBaseOption, SelectGroupOptions} from   './SelectField/SelectField.types';
  import TextArea from './TextArea/TextArea';
  import {Label, ErrorMessage} from './Parts';

 export {
    Accordion,
    AccordionGroup,
    Avatar,
    Button,
    BUTTON_THEMES,
    Checkbox,
    CheckboxGroup,
    ELEMENT_SIZE,
    ErrorMessage,
    Form,
    Grid,
    BREAKPOINTS,
    Icon,
    InputField,
    Label,
    LoaderComponent,
    LoaderPage,
    Modal,
    Panel,
    PlainModal,
    Radio,
    RadioGroup,
    SelectField,
    SelectOptions,
    SelectArrayOptions,
    SelectBaseOption,
    SelectGroupOptions,
    TextArea,
  };

Upvotes: 2

Views: 2205

Answers (1)

Nicolas R
Nicolas R

Reputation: 293

You can use the rollup option preserveModules in your output configurations:

output: [
    {
      dir: packageJson.main,
      format: 'cjs',
      sourcemap: true,
      preserveModules: true,
    },
    {
     dir: packageJson.module,
     format: 'esm',
     sourcemap: true,
     preserveModules: true,
   },

https://rollupjs.org/guide/en/#outputpreservemodules

Upvotes: 2

Related Questions