gulp के भीतर से ब्राउज़रify का उपयोग करते समय ब्राउज़र पर 'आवश्यकता' का पर्दाफाश कैसे करें?

जब मैं एक फ़ाइल x.js है कि इस तरह दिखता है:gulp के भीतर से ब्राउज़रify का उपयोग करते समय ब्राउज़र पर 'आवश्यकता' का पर्दाफाश कैसे करें?

x.js

module.exports = function (n) { return n * 111 }

और मैं बहुत की तरह कमांड लाइन से browserify चलाएँ:

browserify -r ./x.js > bundle.js

मैं एक मिल आउटपुट फ़ाइल जो इस तरह दिखती है (लगभग):

require=(function e(t,n,r){function ...... 
./App.jsx":[function(require,module,exports){ 
module.exports=require('0+DPR/'); 
},{}]},{},[])

फिर मेरे ब्राउज़र कोड में मैं यह कर सकता:

<html> 
    <head> 
    <title>React server rendering example</title> 
    <script src="static/bundle.js"></script> 
    </head> 
    <body> 
    Welcome to the React server rendering example. Here is a server-rendered React component: 
    <div id="53a442ff8b39d"></div><script> 
    var x = require('./x.js'); 
    console.log(x(3)) 
</script> </body> 
</html>

मैं वास्तव में दो प्रश्न हैं:

1) यह नहीं है ब्राउज़र मैं त्रुटि मिलती है में काफी काम: "Uncaught त्रुटि: नहीं खोजा जा सका मॉड्यूल './x। js ' "। ऐसा क्यों हो रहा है?

2) मैं वास्तव में इसे विनील-स्रोत-स्ट्रीम का उपयोग करके गलप में चलाने के लिए चाहता हूं। मैंने अपने gulpfile में ऐसा कुछ करने की कोशिश की है लेकिन यह काम नहीं करता है। कोई विचार? मैं त्रुटि 'की आवश्यकता होती है परिभाषित नहीं है'

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

var b = browserify({ 
    entries: ['./x.js'], 
    }); 
    b.bundle({debug: false}) 
    .pipe(source('bundle.js')) 
    .pipe(gulp.dest('./build'));

स्रोत

2014-06-20 asolberg

अपने कमांड लाइन उदाहरण में आप '' bundle.js' x.js' रूप में एक ही फ़ोल्डर में लिख रहे हैं, लेकिन अपने HTML 'स्थिर/bundle.js' से पढ़ रही है, और अपने' gulp' उदाहरण में आप इसे 'build/bundle.js' पर लिख रहे हैं। वास्तव में आप कौन सा चाहते हैं? – loganfsmyth

चलो बस मान लें कि मैं उचित एमवी bundle.js कमांड को वेबसर्वर तक पहुंचने के लिए सही स्थान पर रखने के लिए करता हूं। यह समस्या का क्रूक्स यहां नहीं है। – asolberg

उम्मीद है कि यह [github परियोजना] (https://github.com/erichosick/nodeboxrequire) मदद करेगा। यह दिखाता है कि लाइब्रेरी, एचटीएमएल, गल्प फ़ाइल इत्यादि की आवश्यकता और निर्यात कैसे करें। – ehsk

अद्यतन प्राप्त करें: आप अपने -r स्विच में एक उपनाम संदर्भित कर सकते हैं

प्रयास करें: browserify -r ./x.js:my-module > bundle.js

और अपने पृष्ठ में: var x = require('my-module');

नोट: यदि आप के माध्यम से FS या की तरह एक नोड मॉड्यूल पर एक -r स्विच का इस्तेमाल किया , आपको इनके लिए उपनाम की आवश्यकता नहीं है क्योंकि उनके पास आमतौर पर उनके पैकेज.जेसन फ़ाइल में एक नाम होता है।

अधिक जानकारी के लिए node-browserify -- external requires देखें।

आप (-r स्विच के साथ) इस तरह अपने x.js बंडल करने जा रहे हैं वहाँ विकल्पों

1) अपने HTML पृष्ठ में स्क्रिप्ट ले लो और इसे अलग से बंडल के एक जोड़े हैं।

एक main.js फ़ाइल बनाएं और उसे अपनी जे एस डाल दिया।

उपयोग browserify -x ./x.js > main.js

-x स्विच का उपयोग करके, Browserify अपने bundle.js में एक dependancy के रूप में लिंक करेगा।

फिर अपने पेज में दोनों जे एस फ़ाइलें संदर्भ।

2) ब्राउज़रify द्वारा उत्पन्न नाम का उपयोग करें।

var x = require('0+DPR/');

ऊपर एक उपनाम बनाने के लिए देखें अद्यतन।
नीचे
अच्छा संसाधन के बाद से आप के लिए और अधिक Gulp + Browserify Gulp

Browserify - Bring Nodejs modules to browsers

के साथ आगे जाने के लिए देख रहे हैं (Watchify रूप में अच्छी तरह livereload के लिए उपयोग करता है) Viget पर ब्लॉग पोस्ट देखें

Gulp + Browserify: The Everything Post

स्रोत

2014-06-28 05:30:04 mikekidder

वास्तव में आप बहुत करीब है, दो चीजों के अलावा:

आप एक संपर्क में नाम है कि आप की आवश्यकता के लिए() बाद में उदाहरण के लिए उपयोग कर सकते हैं, के साथ अपने 'x.js' बेनकाब करने के लिए की जरूरत है: 'x' है आपके मामले में एक अच्छा विकल्प

बजाय
require('./x.js'); आपको क्या करना चाहिए require('x');

एक HTML दस्तावेज़ (index.html)

<html> ... <script src='dist/x.js'></script> <script> var x = require('x'); console.log(x(3)); </script>

में gulpfile.js

var gulp = require('gulp'); var browserify = require('browserify'); var transform = require('vinyl-transform'); gulp.task('build-lib', function() { var browserified = transform(function(filename) { return browserify(filename) .require(filename, { expose: 'x'}) .bundle(); }); return gulp.src('./lib/x.js') .pipe(browserified) .pipe(gulp.dest('./dist')); // currently this recipe will output to ./dist/x.js. you may use a rename plugin to output it with a different filename for eg. bundle.js }); gulp.task('default', ['build-lib']);

में
lib/x.js

module.exports = function (n) { return n * 111 }

में
:
तो पूरा जवाब देने के लिए आप गल्प रेसिपी के बारे में थोड़ा सा विवरण:

मैंने vinyl-source-stream के बजाय vinyl-transform का उपयोग किया।

आप vinyl-source-stream उपयोग करने के लिए चुन सकते हैं, लेकिन आप सही है कि बाद vinyl-buffer में पाइप को याद करने के लिए यदि आप करने वाले प्लग इन (बजाय विनाइल फ़ाइल वस्तु स्ट्रीमिंग कि vinyl-source-stream बाहर देता है) बफ़र विनाइल फ़ाइल वस्तुओं पर काम करता है का उपयोग कर अधिक परिवर्तनों है है

क्या vinyl-transform करता है कि यह आपके लिए दोनों बफ़र और स्ट्रीमिंग विनाइल फ़ाइल वस्तुओं का ध्यान रखता है।

स्रोत

2014-08-13 15:13:56

gulp के भीतर से ब्राउज़रify का उपयोग करते समय ब्राउज़र पर 'आवश्यकता' का पर्दाफाश कैसे करें?

उत्तर

संबंधित मुद्दे