score:27

Accepted answer

in case someone will run into this: here is my working rollup configs.

i updated the demo repo as well.

import babel from 'rollup-plugin-babel';
import filesize from 'rollup-plugin-filesize';
import noderesolve from 'rollup-plugin-node-resolve';
import progress from 'rollup-plugin-progress';
import visualizer from 'rollup-plugin-visualizer';
import commonjs from 'rollup-plugin-commonjs';
import json from 'rollup-plugin-json';
import replace from 'rollup-plugin-replace';

export default {
  input: 'src/index.js',
  output: [
    {
      file: 'dist/index.js',
      format: 'umd',
      sourcemap: 'inline',
    },
  ],
  plugins: [
    progress(),
    noderesolve({
      browser: true,
    }),
    json(),
    commonjs({
      include: [
        'node_modules/**',
      ],
      exclude: [
        'node_modules/process-es6/**',
      ],
      namedexports: {
        'node_modules/react/index.js': ['children', 'component', 'proptypes', 'createelement'],
        'node_modules/react-dom/index.js': ['render'],
      },
    }),
    babel({
      babelrc: false,
      presets: [['es2015', { modules: false }], 'stage-1', 'react'],
      plugins: ['external-helpers'],
    }),
    visualizer(),
    filesize(),
    replace({
      'process.env.node_env': json.stringify('production'),
    }),
  ],
};

my original problem was assuming react dependency was external. this is correct for the component libraries but not for standalone app. i also had to fix some minor problems and named imports mapping.

hope this will save somebody some time.

score:3

here's a more up-to-date version using the supported rollup plugins for anyone new who stumbles across this question wanting typescript support:

// rollup.config.js

import commonjs from '@rollup/plugin-commonjs';
import resolve from '@rollup/plugin-node-resolve';
import replace from '@rollup/plugin-replace';
import peerdepsexternal from 'rollup-plugin-peer-deps-external';
import typescript from '@rollup/plugin-typescript';
import css from 'rollup-plugin-css-only';

export default {
      input: 'src/index.ts',
      output: [
        {
          file: 'dist/index.js',
          name: 'app',
          sourcemap: 'inline',
          format: 'iife',
        },
      ],
      plugins: [
        peerdepsexternal(),
        resolve({
          browser: true,
          dedupe: ['react', 'react-dom'],
        }),
        replace({
          'process.env.node_env': json.stringify('production'),
        }),
        commonjs(),
        typescript({
          tsconfig: 'tsconfig.json',
          sourcemap: true,
          inlinesources: true,
        }),
        css({ output: 'dist/style.css' }),
      ],
    };
  });

this will output an index.js and style.css within the dist folder

if you are not using typescript, just remove the typescript import and plugin from the sample.


Related Query

More Query from same tag