react-npm-boilerplate icon indicating copy to clipboard operation
react-npm-boilerplate copied to clipboard

Consider using rollup to compile the dist files

Open lucasmotta opened this issue 8 years ago • 3 comments

If you don't know about rollup, I highly recommend having a look into it. It can output a much smaller distribution file than using babel directly.

I've released a simple react library and I did a lot of tests before deciding to stick with Rollup - it's a big difference, you should give it a try too. The config would be something like this:

import babel from 'rollup-plugin-babel';
import replace from 'rollup-plugin-replace';
import commonjs from 'rollup-plugin-commonjs';
import nodeResolve from 'rollup-plugin-node-resolve';

export default {
  moduleName: 'NameOfYourModuleForAMD',
  entry: './src/index.js',
  dest: './dist/index.js',
  format: 'umd',
  plugins: [babel(), commonjs()],
  globals: {
    react: 'React' // because you don't want to include React on the bundled js
  }
};

Plus you have the benefit of having a UMD package.

And just one smaller thing, I would add "react" as a peerDependency so people can choose the React version they want to use.

lucasmotta avatar Mar 05 '16 13:03 lucasmotta

Hi, I'll take a closer look at rollup.

With current configuration you can also produce UMD modules. By changing babel plugin here you can use http://babeljs.io/docs/plugins/transform-es2015-modules-umd/

juliancwirko avatar Mar 06 '16 19:03 juliancwirko

You can create umd modules, but tree-shaking won't work with webpack.

vladshcherbin avatar Apr 29 '16 04:04 vladshcherbin

... just info ;) after a long time I plan to rebuild the boilerplate to use rollup

juliancwirko avatar Aug 01 '17 15:08 juliancwirko