如何將Bower程序包依存關系排除在匯總包之外？

Question

我當前正在創建一個Bower軟件包，該軟件包導出一個ES6模塊。

為我的程序包構建dist時，我使用匯總將所有內部模塊移動到單個模塊中，僅導出一個模塊。

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

一切都很好，但是我從其他Bower包中導入了一些依賴項，這些包我不想與我的模塊捆綁在一起（jQuery，font-awesome）。

我的問題是這樣的： 如何繼續捆綁我的代碼並保留Bower程序包的ES6導入語句-但又不匯總將外部代碼捆綁到我的捆綁軟件中？

例：

"use strict";

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

export
default class GuacaMarkdownEditor {

  ...

}

Answer 1

您可以使用此匯總插件rollup-plugin-includepaths 。

它允許您按名稱導入模塊，並定義應從捆綁軟件中排除的模塊。 我在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 
 };

在es6模塊中：

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

在這里更多關於外部分辨率的討論

Answer 2

似乎匯總將檢測命名的導入（相對於相對路徑），作為外部依賴項。

捆綁此模塊時：

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

捆綁使用該模塊的應用程序時，使用browserify正確導入了jquery。

Answer 3

但是，如果您想將自己制作的模塊排除在下面，我已經回答了anthr，我認為這是一個清晰的解釋。

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

捆綁軟件外部應保留的模塊ID列表

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