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:

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

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

Answer 1

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>