उसी पृष्ठ पर ब्राउज़र और आवश्यकताजेएस का उपयोग करना?

Question

तो मैं एक दिलचस्प उपयोग मामले में आया हूं जहां मैं एक परियोजना में एक साथ अपनी सभी संपत्तियों को बंडल करने के लिए ब्राउज़रइफ़ का उपयोग कर रहा हूं, लेकिन एक बड़े बाहरी (प्रोजेक्ट के बाहर) मॉड्यूल को लोड किया जाना चाहिए जब एक निश्चित इन- ऐप विंडो का उपयोग किया जाता है। (यह एक वीडियो प्लेयर मॉड्यूल है जो तीन स्क्रिप्ट से बना है जो आवश्यक होने पर असीमित रूप से खींचा जाता है)।

पल मैं uncalled object त्रुटियों से त्रुटियों के सभी प्रकार हो रही है अगर requireJS मॉड्यूल, इससे पहले कि Browserified app.js फ़ाइल में भरी हुई है cannot find module त्रुटियों के लिए करता है, तो Browserified कोड के बाद में लोड पर।

क्या वैसे भी मैं ब्राउज़र और आवश्यकताजेएस को उसी पृष्ठ पर अच्छी तरह से खेलने के लिए प्राप्त कर सकता हूं? मैं अपना आपा खो रहा हूँ!

Answer 1

टीएल; डीआर - window.require अपने ब्राउज़र स्क्रिप्ट में उपयोग करें।

शायद यह किसी की भी मदद करेगा। मैं एक 'बाहरी' डोजो-आधारित लाइब्रेरी का उपयोग पूरी तरह से जेएस-स्टाइल एएमडी पर आधारित होता हूं, जो पूरी तरह से गैर- "ब्राउज़रफिबल" है और कॉमनजेएस या किसी भी तरह से परिवर्तनीय नहीं है। मेरा अपना कोड पूरी तरह से ब्राउज़रबद्ध है। browserified स्क्रिप्ट से पहले

1. लोड एएमडी लोडर (जो वैश्विक require समारोह को परिभाषित करता है): यह इस तरह ठीक काम कर रहा है

   <script src="dojo/dojo.js"></script> <!-- RequireJS/AMD loader, defining a global 'require'--> 
   <script src="app/main.js"></script> <!-- The Browserify bundle --> 
   

2. अपनी खुद की js में, window वस्तु पर require फ़ंक्शन को कॉल करें ('आप एक स्थानीय browserify- require वैश्विक एक पीछा होगा कारण)

   window.require(['dojo/dojo'], function (dojo) { ... }); 
   

3. 'बाहरी' ऐप या लाइब्रेरी, जो require को स्वयं को पनडुब्बियों को लोड करने के लिए कॉल करती है, ठीक काम करती है 'क्योंकि कोड ब्राउज़र संदर्भ के बाहर है और वैश्विक require वहां छाया नहीं है।

हो सकता है कि अगर आप कुछ शुद्ध अच्छा मानक RequireJS मॉड्यूल है, तो आप किसी भी तरह Browserifiable होने के लिए उन्हें बदलने सकता है, लेकिन मेरे मामले कि एक विकल्प नहीं था।

Answer 2

browserify-derequire नामक एक उपकरण है जो नामकरण टकराव से बचने के लिए ब्राउज़र की आवश्यकता वाले स्टेटमेनेट का नाम बदलकर इस समस्या को हल करता है। करने के लिए अपने निर्माण आदेश बदलते द्वारा

npm install -g browserify-derequire 

एक browserify प्लगइन के रूप में यह प्रयोग करें::

यह NPM उपयोग करने के साथ स्थापित किया जा सकता https://github.com/substack/node-browserify/issues/790

:

browserify src/*.js -p browserify-derequire > module.js 

वहाँ कम से इस मुद्दे पर और अधिक चर्चा है

Answer 3

एक गल्प अनुकूल समाधान के लिए (@ Cride5 प्रस्तावित के समान) आप gulp-derequire प्लगइन का उपयोग कर सकते हैं।डॉक्स से

बुनियादी उदाहरण:

var derequire = require('gulp-derequire'); 
var browserify = require('browserify'); 
var source = require('vinyl-source-stream'); 

gulp.task('build', function() { 
    var bundleStream = browserify({entries: './index.js', standalone: 'yourModule'}).bundle(); 
    return bundleStream 
     .pipe(source('yourModule.js')) 
     .pipe(derequire()) 
     .pipe(gulp.dest('./build')); 
}); 

प्लगइन भी derequire मॉड्यूल तो सभी विकल्प का समर्थन कर रहे पर आधारित है।