CODEWITHSUNDEEP
javascriptmodulebrowserify
user1082754
user1082754

Reputation:

Global require with Browserify v2

I want to use Browserify to bundle my files, but I then need to require one of the modules inside of my Browserify bundled bundle.js on the HTML page itself. This is currently not possible because there is no require function defined on the page.

It appears that the require function defined by browserify in bundle.js is inside of an IIFE, so I can't use that. Is it possible to throw this one out in place of a global require?

<script src="bundle.js"></script>
<script>
  // Require the `app` module inside of `bundle.js`
  var app = require('app');
  app.start();
</script>

I need to do this because my app.start function requires some JSON is passed to it which can only be rendered by the server-side template.

N.B. I am using Browserify v2.

Upvotes: 16

Views: 10247

Answers (1)

substack
substack

Reputation: 3386

You can use -r to expose a global require() function for the files you specify:

x.js:

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

Console

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

then in your html:

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

will print 333.

In your case, just do browserify -r app to expose require('app') to the external context.

Upvotes: 33

Related Questions