When I have a file x.js that looks like this:
x.js
module.exports = function (n) { return n * 111 }
and I run browserify from the command line like so:
browserify -r ./x.js > bundle.js
I get an output file that looks like this (roughly):
require=(function e(t,n,r){function ......
./App.jsx":[function(require,module,exports){
module.exports=require('0+DPR/');
},{}]},{},[])
Then in my browser code I can do this:
<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>
I actually have two questions:
1) This doesn't quite work in the browser I get the error: "Uncaught Error: Cannot find module './x.js'". Why is that happening?
2) I actually want to run this in gulp using vinyl-source-stream. I've tried doing something like this in my gulpfile but it doesn't work. Any ideas? I get the error 'require is not defined'
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'));
bundle.js
into the same folder asx.js
, but your HTML is reading it fromstatic/bundle.js
, and in yourgulp
example you are writing it tobuild/bundle.js
. Which one is actually the one you want? – loganfsmyth Jun 20 '14 at 15:13