How can I keep package package dependencies on my cumulative package package?

Question

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

When creating dist for my package, I use rollup to move all of my internal modules into one module, exporting only 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')); }); 

Everything works fine, but I import some dependencies from other bower packages that I don’t want to bind to my module (jQuery, font-awesome).

My problem is this: How can I continue to bind MY code and save ES6 import instructions for bower packages, but without folding the external code into my package?

Example:

 "use strict"; import $ from 'jquery'; // dont bundle this! import GuacaAirPopUp from './GuacaAirPopUp'; // bundle this! export default class GuacaMarkdownEditor { ... } 

Answer 1

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

When linking this module:

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

The following messages provided the link:

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

When linking an application using this module, jquery was imported correctly using a browser.

Answer 2

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

It allows you to import modules by name and define modules that should be excluded from the package. I used it in 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 es6 modules:

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

Read more about external resolution here.

Answer 3

Answered already by anthr, however, if you want to exclude your own modules below, I think this is a clear explanation.

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

List of module identifiers that must remain external to the package

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