CODEWITHSUNDEEP
javascriptfrontendbrowserifyweb-frontend
Tan Fengji
Tan Fengji

Reputation: 21

How to use bundle file created by browserify?

I made 4 javascript files, A,B,C,D, and they will export 4 modules A,B,C,D. Their dependency is A->B->C->D. I key in the command

browserify A.js -o bundle.js

and a bundle file include A,B,C,D is created. In the html file, i got

<script src="bundle.js"></script>
<script src="client.js"></script>

inside the client.js, i got

var a = new A();

the console will print an error that A is not defined. However, the client.js will work if i delete the 'require' and module.exports on all js file and do this in html file

<script src = "D.js"></script>
<script src = "C.js"></script>
<script src = "B.js"></script>
<script src = "A.js"></script>
<script src = "client.js"></script>

Does anyone have any idea about this issue?

Upvotes: 2

Views: 105

Answers (2)

Peter Haight
Peter Haight

Reputation: 1934

Besides the standalone option that Mauricio proposed, you can also have browserify create a require function so you can use the require function in the browser.

browserify -r ./A.js:a_module ./B.js ./C.js ./D.js -o bundle.js

Then your client.js file can do this:

var a_module = require('a_module');
var a = new a_module.A();

This is the external requires option.

Upvotes: 0

Mauricio Poppe
Mauricio Poppe

Reputation: 4876

You have to create a standalone bundle which will add a variable to the global execution context, this is done with the --standalone <name> option

browserify A.js --standalone A -o bundle.js

Upvotes: 1

Related Questions