如何将 bower 包依赖项排除在我的汇总包之外？

Question

我目前正在创建一个导出单个 ES6 模块的 bower 包。

在为我的包构建 dist 时，我使用 rollup 将我所有的内部模块移动到一个模块中，只导出一个模块。

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 似乎会将命名导入（相对于相对路径）检测为外部依赖项。

捆绑此模块时：

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。

它允许您按名称导入模块，并定义应从捆绑包中排除的模块。我在 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'; 
//...

更多关于外部解析的讨论here

Answer 3

anthr 已经回答了，但是如果你想排除下面你自己制作的模块，我相信这是一个明确的解释。

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

A list of IDs of modules that should remain external to the bundle

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

如何将 bower 包依赖项排除在我的汇总包之外？

How do I keep bower package dependencies out of my rollup bundle?

javascript

bower

ecmascript-6

gulp

rollupjs