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
        // 
        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 {

  ...

}

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./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 {

  ...

}

• javascript
• gulp
• bower
• ecmascript-6
• rollupjs

3 Answers 3

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

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.

Answered already by anthr however if you want to exclude your own made modules down below I believe is a clear explanation.

https://github./rollup/rollup/wiki/JavaScript-API#external

A list of IDs of modules that should remain external to the bundle

// main.js
import myMod from './my-module'; // <-- this module you don't wanna import

// build.js <--- gulp file
import * as path from 'path';

//...more of you gulp file code

rollup.rollup({
  entry: 'app.js',
  external: [
    './my-module', // <--- node module to be excluded from the bundle
    path.resolve( './src/special-file.js' ) // <--- file you made to be excluded from the bundle
  ]
}).then(...)

//...more of you gulp file code

// 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./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'));
});