2015-12-02 3 views
5

В настоящее время я создаю пакет bower, который экспортирует один модуль ES6.Как я могу сохранить зависимости пакета пакета от моего пакета накопительных пакетов?

При создании dist для моего пакета я использую rollup для перемещения всех моих внутренних модулей в один модуль, экспортируя только один модуль.

Глоток задача:

// 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, шрифт-удивительным).

Моя проблема заключается в следующем: Как я могу скомпоновать код MY и сохранять инструкции импорта ES6 для пакетов bower - но без свертывания, связывающего внешний код с моим пакетом?

Пример:

"use strict"; 

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

export 
default class GuacaMarkdownEditor { 

    ... 

} 

ответ

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.

+0

Что такое рабочий процесс для этого? Достаточно ли запустить браузеру на одном сгенерированном пакете es2015? –

+0

Browserify должен обрабатывать это тоже, но в моем текущем рабочем процессе я импортирую этот модуль в другое приложение и связывая его. Вы можете увидеть пример в моем репо для простой утилиты: https://bitbucket.org/technicallycompatible/guacamarkdown/src – anthr

3

Вы можете использовать этот плагин для плагинов 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

1

Answered уже на anthr Однако, если вы хотите, чтобы исключить свой собственный сделал модули ниже, я считаю, это четкое объяснение.

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