CODEWITHSUNDEEP
javascriptnode.jsrequirejsbrowserify
Jenny Hilton
Jenny Hilton

Reputation: 1407

Load browserify boundle.js with require.js

we having framework that work with require.js we are loading packages like following 

define(["converter/service/utils"], function (utils) {

And now we are able to use utils file.

Now we have a new js file which was browserify and uglify like 

browserify main.js | uglifyjs > bundle.js

i've add the boundle.js file to my project (under service folder) and I want to load it but it's not working...

I try to load it like following:

   define(["converter/service/bundle"], function (bundle) {

but bundle is empty (while debug it...)

Any idea how to load browserfiy file with require.js?

I know that in the doc of broswerify we should add it like 

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

but we use require.js to load modules and I was able to do so with other js files... for example if I save this file in my project

https://rawgit.com/hugeen/lebab-experiment/master/lebab.js

I can load it with require.js ...

Edit:

what I did is npm init & 

npm install lebab --save

create file main.js and put the following code

var lebab = require("lebab");

And run the command

browserify --standalone someName main.js | uglifyjs > bundle.js

it finish sucessfully

Take the bundle.js file put it under converter/service folder

And try to require it like following:

define(["converter/service/bundle"], function (bundle) {

or also 

define(["converter/service/someName"], function (bundle) {

and it doesn't work...what am I missing here?

EDIT2

Since we use our tool (which wrap require.js) it's hard to track the right error, there is some tool (require.js) which I use to verify it with webstoram vscode with some project adjustments. I just want to verify that the bundle was created right...

Upvotes: 1

Views: 536

Answers (1)

Louis
Louis

Reputation: 151401

Your bundle does not contain the necessary code to allow RequireJS to load it, because by default browserify does not include that is needed. One way to get the result you want is to use --standalone to tell Browserify to put a UMD wrapper around your bundle:

browserify --standalone someName main.js | uglifyjs > bundle.js

someName is a name that will be used by the UMD wrapper if it detects that it is not running in a CommonJS or AMD environment. In such case it will export your bundle as the symbol someName in the global space. You have to decide what name you want to use there.

With the UMD wrapper in place, your bundle will detect that it is running in an AMD environment (because RequireJS makes define available), and will call define to register itself with RequireJS as a module.

Upvotes: 1

Related Questions