What do you do when a rollup project contains a common library like jquery and backbone?

Question

I am using rollup to build a library that is dependent on jquery and backbone. Spent three weeks building it, but now I'm realizing that my bundled code contains the source code for jquery and backbone inside of it. So including my library on a page with jquery already on it will just double jquery, leading to a lot of unnecessary bloat.

How do developers deal with this issue?

score 2 · Accepted Answer · answered Mar 02 '17 at 01:35

In this context it would be appropriate to leave jQuery and Backbone out of the bundle with a config along these lines:

// rollup.config.js
export default {
  entry: 'src/main.js',
  moduleName: 'myLibrary',
  targets: [
    { dest: 'dist/my-library.umd.js', format: 'umd' },  // pkg.main
    { dest: 'dist/my-library.es.js', format: 'es' } // pkg.module
  ],
  external: [ 'jquery', 'backbone' ],
  globals: {
    jquery: 'jQuery',
    backbone: 'Backbone'
  }
};

That way, if someone is bundling an app with your library, jQuery and Backbone will be included but only once. If, on the other hand, your library is included as a <script> tag then it would work as long as there were also <script> tags for jQuery and Backbone beforehand.

What do you do when a rollup project contains a common library like jquery and backbone?

1 Answers1