मैं अपने रोलअप बंडल से बॉवर पैकेज निर्भरताओं को कैसे रखूं?

Question

मैं वर्तमान में एक बोवर पैकेज बना रहा हूं जो एक एकल ES6 मॉड्यूल निर्यात करता है।

मेरे पैकेज के लिए डिस्ट का निर्माण करते समय, मैं अपने सभी आंतरिक मॉड्यूल को एक मॉड्यूल में स्थानांतरित करने के लिए रोलअप का उपयोग कर रहा हूं, केवल एक मॉड्यूल निर्यात करता हूं।

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

यह सब ठीक काम करता है, लेकिन मैं अन्य बोवर संकुल जो मैं अपने मॉड्यूल (jQuery, फ़ॉन्ट भयानक) के साथ बंडल नहीं करना चाहते से कुछ निर्भरता आयात करने कर रहा हूँ।

मेरी समस्या यह है: मैं अपने कोड को बंडल कैसे रख सकता हूं और बॉवर पैकेज के लिए ES6 आयात विवरण कैसे रख सकता हूं - लेकिन मेरे बंडल में बाहरी कोड को बंडल किए बिना रोलअप के बिना?

उदाहरण:

"use strict"; 

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

export 
default class GuacaMarkdownEditor { 

    ... 

} 

Answer 1

ऐसा लगता है कि रोलअप नामित आयात की पहचान करेगा (के रूप में संबंधित पथ के खिलाफ), बाहरी निर्भरता के रूप में।

जब इस मॉड्यूल bundling:

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'; 
//... 

अधिक चर्चा बाहरी संकल्प here

Answer 3

पहले से ही उत्तर दिया anthr द्वारा लेकिन यदि आप अपने खुद के किए गए बाहर करना चाहते हैं के बारे में मैं एक 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')); 
});