Wie kann ich "erfordern" für den Browser verfügbar machen, wenn ich browserify in gulp verwende?

Question

Jun 20, 2014, 04:32 PM

Wie kann ich "erfordern" für den Browser verfügbar machen, wenn ich browserify in gulp verwende?

Wenn ich eine Datei x.js habe, die so aussieht:

x.js

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

und ich starte browserify von der Kommandozeile aus wie folgt:

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

Ich erhalte eine Ausgabedatei, die ungefähr so aussieht:

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

Dann kann ich in meinem Browser-Code Folgendes tun:

<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>

Ich habe eigentlich zwei Fragen:

1) Dies funktioniert im Browser nicht ganz. Ich erhalte die Fehlermeldung: "Ungefangener Fehler: Modul './x.js' kann nicht gefunden werden". Warum passiert das?

2) Eigentlich möchte ich das in gulp mit Vinyl-Source-Stream ausführen. Ich habe versucht, so etwas in meinem Gulpfile zu machen, aber es funktioniert nicht. Irgendwelche Ideen? Ich erhalte die Fehlermeldung "erfordern ist nicht definiert"

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