Browserify: using external libraries from within bundle

Question

Our team develops browser side javascript app. We use angularjs as framework and some helper libraries in global namespace. For example: underscore.

We carried out a large piece of code (input/output data tranformation) into a standalone library for unit testing reasons.

Now i try to use browserify with this library. The question is about what the best way to exclude from bundle shared (with main app) dependences (underscore for example). I tried 2:

Using --external. I have to create bundle from underscore and use it for all code stuff in app. If i understood right this way seems inconvenient.
Using browser property in package.json to replace underscore with stub:

module.exports = _;

I believe that there is more clean approach, but where is it?

marcel · Accepted Answer · 2015-06-23 12:55:39Z

2

You don't have to use --external or something like that. Just include the library like this:

<script src="external/lib.js"></script>

then you can use it within your bundle (without require).

BUT: In my opinion you shouldn't mix global libs with browserify. All benefits of browserify will decrease drastically this way.

Contras:

more than one file to include
worse readability cause fewer `require` statements

RECOMMEND:

create one bundle with all external libs and install them as npm modules.

npm install --save angular
npm install --save lodash

create external bundle:

browserify -r angular -r lodash > external/libs.js

you only have to bundle it once because they should never change. then create main app bundle without external modules:

browserify --no-bundle-external app.js > bundle.js

then include these two bundles to your page:

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

edited Jun 23, 2015 at 12:55

answered Jun 23, 2015 at 12:50

marcel

3,1471 gold badge20 silver badges29 bronze badges

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

5 Comments

user3414982 Over a year ago

Problem is that i have to use require('./external/lib') for testing purpose in node environment.

user3414982 Over a year ago

I don't know whether one can use angular with commonjs modules... It has its own approach for modules management. For this reason i would like to keep the rest of app as is.

marcel Over a year ago

ok. NOTE: i have often heard about problems when using browserify with commonjs modules. Sry, but i cannot help with that.

vini Over a year ago

Do we have to remove require from all files then when using external libs?

marcel Over a year ago

Yes. When you include the libraray directly in your html file (and don't use something like browserify to bundle/scope your code) you have the remove the hole require statement, var lib = require("external/lib.js");. The library should be accessible in the global space. You just have to use it.

Collectives™ on Stack Overflow

Browserify: using external libraries from within bundle

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related