How do I keep bower package dependencies out of my rollup bundle?

Question

I'm currently creating a bower package that exports a single ES6 module.

When building the dist for my package, I'm using rollup to move all my internal modules into a single module, exporting only the one module.

Gulp task:

// Bundle ES6 modules into a single file
gulp.task('bundle', function(){
  return gulp.src('./src/GuacaMarkdownEditor.js', {read: false})
    .pipe(rollup({
        // any option supported by rollup can be set here, including sourceMap
        // https://github.com/rollup/rollup/wiki/JavaScript-API
        format: 'es6',
        sourceMap: true
    }))
    .pipe(sourcemaps.write(".")) // this only works if the sourceMap option is true
    .pipe(gulp.dest('./dist'));
});

This all works fine, but I'm importing some dependencies from other bower packages which I don't want to bundle with my module (jQuery, font-awesome).

My problem is this: How can I keep bundling MY code and keep the ES6 import statements for bower packages - but without rollup bundling the external code into my bundle?

Example:

"use strict";

import $ from 'jquery'; // dont bundle this!
import GuacaAirPopUp from './GuacaAirPopUp'; // bundle this!

export
default class GuacaMarkdownEditor {

  ...

}

Answer 1

You can use this rollup plugin rollup-plugin-includepaths.

It allows you to import modules by name and define modules should be excluded from the bundle. I used it in a rollup.config.js:

import babel from 'rollup-plugin-babel'; 
import includePaths from 'rollup-plugin-includepaths'; 

var includePathOptions = { 
    paths: ['es6'], 
    include: { 
      'd3': './global/js/' + 'base/d3.min'  // include library in es6 modules
    },   
    external: ['d3'] // but don't bundle them into bundle.js
};

export default { 
 entry: './es6/entry.js', 
 plugins: [ 
 includePaths(includePathOptions), 
 babel() 
 ], 
 format: 'amd', 
 dest: 'build/bundle.js', 
 sourceMap: true 
 };

And in the es6 modules:

// not using relative path since it is handled by the plugin
import d3 from 'd3';
import other from 'otherModules'; 
//...

More discussion about external resolution here

Answer 2

It seems that rollup will detect named imports (as opposed to relative paths), as external dependencies.

When bundling this module:

import GuacaAirPopUp from './GuacaAirPopUp';
import ControlHandlerService from './ControlHandlerService';
import DefaultHandlerConfig from './DefaultHandlerConfig';
import toMarkdown from 'to-markdown';
import $ from 'jquery';

The bundler gave these messages:

Treating 'to-markdown' as external dependency
Treating 'jquery' as external dependency

When bundling the application that used this module, jquery was imported correctly using browserify.