Bower paketi bağımlılıklarını toplama paketimden nasıl saklarım?

Question

Şu anda tek bir ES6 modülünü dışa aktaran bir çim biçme paketi oluşturuyorum.

Paketime yönelik rahatsızlığı oluştururken, tüm iç modüllerimi tek bir modüle taşımak için kullanıyorum ve yalnızca bir modülü dışa aktarıyorum.

Gulp görev:

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

Bu, tüm iyi çalışır, ama ben Modülümde (jQuery, font-korku) ile paket istemiyorum diğer Bower paketlerinden bazı bağımlılıkları aktarıyorum.

Sorunum şudur: MY kodunu paketlemeye ve ES6 içe aktarma ifadelerini bower paketleri için nasıl saklayabilirim - ancak toplaması olmadan, dış kodu paketimde birleştiriyor mu?

Örnek:

"use strict"; 

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

export 
default class GuacaMarkdownEditor { 

    ... 

} 

Answer 1

görünüyor (göreli yollar aksine) dış bağımlılıkları gibi adlandırılmış ithalatı tespit edeceği toplaması.

Bu modül demetleme olduğunda:

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

paketleyici bu mesajlar verdi:

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

bu modül kullanılan uygulamayı demetleme, jquery browserify kullanılarak doğru içe edildi.

Answer 2

Bu toplayıcı eklentisini rollup-plugin-includepaths kullanabilirsiniz.

Modülleri adlara göre almanıza izin verir ve tanımlayıcı modüller paketten çıkarılmalıdır.

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 
}; 

Ve ES6 modüllerde:

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

Daha tartışma yapmış kendi dışlamak istediğiniz ancak eğer anthr tarafından zaten Yanıtlanmış dış çözünürlükte here

Answer 3

hakkında bir rollup.config.js kullanmış aşağıya inen modüller açık bir açıklama olduğuna inanıyorum.

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

paket

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