bowerパッケージの依存関係をロールアップバンドルから守るにはどうすればよいですか？

Question

私は現在、単一のES6モジュールをエクスポートするbowerパッケージを作成しています。

パッケージのdistをビルドするときに、ロールアップを使用してすべての内部モジュールを1つのモジュールに移動し、1つのモジュールのみをエクスポートします。

ガルプタスク：

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

このすべてが正常に動作しますが、私は私のモジュール（jQueryの、フォント素晴らしい）をバンドルしたくない他の亭パッケージからいくつかの依存関係をインポートしています。

私の問題は次のとおりです。私のコードをバンドルし、バウアーパッケージのES6インポートステートメントを保持するにはどうすればよいですか？

例：

"use strict"; 

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

export 
default class GuacaMarkdownEditor { 

    ... 

} 

Answer 1

ロールアップは、外部依存関係と命名輸入（相対パスではなく）、検出するものと思われます。

このモジュールをバンドル：

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

をバンドラは、これらのメッセージを与えた：

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

このモジュールを使用するアプリケーションをバンドルすると、jqueryのはbrowserify使用して正しくインポートされました。

Answer 2

このロールアッププラグインrollup-plugin-includepathsを使用できます。

モジュールを名前でインポートし、定義するモジュールをバンドルから除外することができます。

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

そしてES6モジュールに：

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

もっと議論あなたが作った独自のものを除外したいしかし場合anthrによって既に回答外部の解像度here

Answer 3

について私はrollup.config.jsでそれを使用しました下のモジュールは私が明確な説明であると信じています。

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

このためのワークフローで何バンドル

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