Load browserify boundle.js with require.js

Question

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

Louis · Accepted Answer · 2017-07-20 16:20:39Z

1

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.

answered Jul 20, 2017 at 16:20

Louis

152k28 gold badges288 silver badges332 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Jenny Hilton Over a year ago

Hi Louis, I did it as you write (with standalone and someName ...)but when I try to use it I got errors: what I try now is: define(["converter/service/bundle"], function (bundle) { .... and also define(["converter/service/someName"], function (bundle) { and it doesnt work, any idea what I miss here ?How should I load the file ? I put the new file under converter/serivce ....

Jenny Hilton Over a year ago

please see my edit, I explained exactly what I did after your suggestion.Thanks!

Louis Over a year ago

Using converter/service/someName in the dependency list you give to define definitely will not work because someName is used only for the branch of the UMD code that is taken only if you are not in a CommonJS or UMD environment. The name someName has no bearing on the AMD module name. I've seen your edit to your question now. You should define what "not work" means concretely. You get a 404? You get an error message? Something to expect to happen does not happen?

Jenny Hilton Over a year ago

It's very hard to give the error since we get some "internal framework" code to cast the error ...but I try to dig it out. meanwhile there is some simple tool /way which I can use to simulate the file that was created with require.js? (I mean outside our framework ) just to eliminate our framework possible issue...Thanks!!!

Jenny Hilton Over a year ago

I was able to load the module but I got an empty object, any idea? I opened new question since you are answer was helps:) stackoverflow.com/questions/45277610/…

|

Collectives™ on Stack Overflow

Load browserify boundle.js with require.js

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related