Come mantenere le dipendenze del pacchetto Bower dal mio pacchetto cumulativo?

Question

Attualmente sto creando un pacchetto Bower che esporta un singolo modulo ES6.

Quando si crea il dist per il mio pacchetto, sto utilizzando il rollup per spostare tutti i miei moduli interni in un singolo modulo, esportando solo un modulo.

compito Gulp:

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

Tutto questo funziona bene, ma sto importando alcune dipendenze da altri pacchetti Bower, che non voglio bundle con il mio modulo (jQuery, font-impressionante).

Il mio problema è questo: Come posso mantenere il raggruppamento del mio codice e mantenere le istruzioni di importazione ES6 per i pacchetti bower, ma senza cumulativo raggruppare il codice esterno nel mio pacchetto?

Esempio:

"use strict"; 

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

export 
default class GuacaMarkdownEditor { 

    ... 

} 

Answer 1

Sembra che cumulativo rileverà importazioni citate (al contrario di percorsi relativi), come dipendenze esterne.

Quando bundling questo modulo:

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

Bundler ha dato questi messaggi:

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

Quando bundling l'applicazione che utilizza questo modulo, jQuery è stato importato correttamente utilizzando browserify.

Answer 2

È possibile utilizzare questo plug-in di rollup rollup-plugin-includepaths.

Consente di importare moduli per nome e definire i moduli che devono essere esclusi dal pacchetto. L'ho usato in un 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 
}; 

E nei moduli ES6:

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

Maggiori discussione su risoluzione esterna here

Answer 3

risposto già da anthr se si desidera escludere il proprio fatta moduli in basso credo che sia una chiara spiegazione.

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

Un elenco di ID di moduli che devono rimanere esterna al fascio

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