How to exclude library files from browserify bundle

Question

I want to avoid cluttering up my distribution bundle with library files and use separate script tags for them in the HTML.

One way is like this...

m1.js

module.exports = "first module";

m2.js

module.exports = "second module";

cnd-m1.js

var m1 =  "first module";

main.js

var m1 = this.m1 || require("./src/m1");
var m2 = require("./src/m2");

console.log(m1);
console.log(m2);

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>browserify test</title>
</head>
<body>
    <script type="text/javascript" src="src/cdn-m1.js"></script>
    <script type="text/javascript" src="dist/bundle.js"></script>
</body>
</html>

Where cdn-m1.js could be a library for example.

The only way I could figure out to make it work is to put a short-circuit fallback in the require statement and --ignore the file in my build.

in package.json

  "scripts": {
    "build-ignore": "browserify ./main.js -i ./src/m1.js > ./dist/bundle.js",
    "build": "browserify ./main.js > ./dist/bundle.js"
  },

Using the build-ignore script, the m1 module was stubbed in the bundle making it much smaller (assuming its a 50k line library) and it falls back on the cdn-served version.

bundle.js

function e(t, n, r) {
    function s(o, u) {
        if(!n[o]) {
            if(!t[o]) {
                var a = typeof require == "function" && require;
                if(!u && a)return a(o, !0);
                if(i)return i(o, !0);
                var f = new Error("Cannot find module '" + o + "'");
                throw f.code = "MODULE_NOT_FOUND", f
            }
            var l = n[o] = {exports: {}};
            t[o][0].call(l.exports, function(e) {
                var n = t[o][1][e];
                return s(n ? n : e)
            }, l, l.exports, e, t, n, r)
        }
        return n[o].exports
    }

    var i = typeof require == "function" && require;
    for(var o = 0; o < r.length; o++)s(r[o]);
    return s
})({
    1: [function(require, module, exports) {
    //    browserify creates a stub for "./src/m1"
    }, {}], 

    2: [function(require, module, exports) {
        var m1 = this.m1 || require("./src/m1");
        var m2 = require("./src/m2");

        console.log(m1);
        console.log(m2);
    }, {"./src/m1": 1, "./src/m2": 3}], 

    3: [function(require, module, exports) {
        module.exports = "second module";
    }, {}]

}, {}, [2]);

Is there a better way to achieve this?

try : `browserify -u ./src/m1.js ./main.js > ./dist/bundle.js` to exclude `m1.js` from the bundle. — marcel, Jul 04 '16 at 22:23
@marcel -u causes the module definition object to be `{"./src/m1": undefined, "./src/m2": 2}` which causes an error — Cool Blue, Jul 05 '16 at 13:59
ok. you could create a seperate bundle for `m1.js` and then just reference to it in the "normal" bundle. this way you will have seperate ` — marcel, Jul 05 '16 at 16:20
yes, that was always my objective: easier said than done but, as always... easy when you know how. There seems to be loads of permutations, I just had to find the right one. Unfortunately, it doesn't work as advertised in the handbook so it took me a while... — Cool Blue, Jul 05 '16 at 16:34

score 0 · Answer 1 · edited May 23 '17 at 10:28

The answer is to use browserify-shim In order to figure it out, I created a slightly more complicated scenario with a fake lib file (main-a.js) with two sub-dependencies (m1.js and m2.js) and made the app (main-b.js) dependent on the fake lib.

I rolled main-a.js into a stand-alone bundle that exposed one global called fakeLib and used a separate script tag in the index.html to load that.

I then used browserify-shim to build an isomorphic version of the app that required main-a.js in node, but used window.fakeLib in the browser.

using this app:

/**
 * main-b.js
 */
require("./src/main-a").say();

This does not work:

  "browserify-shim": {
    "./src/main-a": "fakeLib"
  },

but this does:

  "browserify-shim": {
    "./src/main-a": "global:fakeLib"
  },

You must use this global: I think that may be due to a bug in browserify because it doesn't agree with the browserify handbook

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>browserify test</title>
</head>
<body>
    <div style="white-space: pre;" id="output"></div>
    <script type="text/javascript" src="dist/main-a-lib-pretty.js"></script>
    <script type="text/javascript" src="dist/bundle-B.js"></script>
</body>
</html>

Fake library...

/**
 * m1.js
 */
exports.say = "first module";

.

/**
 * m2.js
 */
exports.say = "second module";

.

/**
 * main-a.js
 */
var m1 = require("./src/m1");
var m2 = require("./src/m2");

exports.say = function() {
    function op(t){
        this.document
            ? document.getElementById("output").textContent += t + "\n"
            : console.log(t);
    }
    op(m1.say);
    op(m2.say);
};

package.json for fake lib. This makes a standalone package that exposes fakeLib

{
  "name": "browserify-nightmare",
  "version": "1.0.0",
  "main": "main-a.js",
  "dependencies": {
  },
  "devDependencies": {
    "browserify-shim": "^3.8.12"
  },
  "scripts": {
    "build-lib": "browserify ./main-a.js -s fakeLib > ../dist/main-a-lib-pretty.js",
    "build-lib-pretty": "browserify ./main-a.js -s fakeLib | js-beautify > ../dist/main-a-lib-pretty.js"
  },
  "author": "cool.blue",
  "license": "MIT",
  "description": ""
}

Fake app

/**
 * main-b.js
 */
require("./src/main-a").say();

package.json that uses browserify-shim to return fakeLib from require("./src/main-a") in the browser but acts like a normal CommonJS module in node.

{
  "name": "browserify-nightmare",
  "version": "1.0.0",
  "main": "main-b.js",

  "browserify-shim": {
    "./src/main-a": "global:fakeLib"
  },
  "browserify": {
    "transform": "browserify-shim"
  },
  "devDependencies": {
    "browserify-shim": "^3.8.12"
  },

  "scripts": {
    "build-B": "browserify ./main-b.js > ./dist/bundle-B.js",
    "build-B-pretty": "browserify ./main-b.js | js-beautify > ./dist/bundle-B.js"
  },
  "author": "cool.blue",
  "license": "MIT",
  "description": ""
}

this answer was super-helpful

git repo

score 0 · Answer 2 · edited May 23 '17 at 11:47

0

First you have to create a seperate bundle for m1.js:

browserify -r ./src/m1.js > ./dist/m1_bundle.js

then simply create the "normal" bundle and reference to the created m1_bundle.js:

browserify -x m1 -d ./main.js > ./dist/bundle.js

now you have to include the two bundles into your HTML-file.

NOTE: you have to include the m1_bundle.js before the "normal" bundle.js in your HTML.

For more details show my other answer. There i explain, how to do the same thing but with node_modules instead of an own library.

edited May 23 '17 at 11:47

Community

1
1

answered Jul 05 '16 at 17:58

marcel

2,967
1
16
25

Thanks for explaining that. By the way, it doesn't work unless you use `browserify -x ./src/m1.js`. You could also use `browserify -r ./src/m1.js:m1` and `require("m1")` instead of `require("./src/m1.js")` but then it's no longer isomorphic and you can't use `require("./src/m1")` or it will also break. It seems quite brittle. Am I mising something? – Cool Blue Jul 06 '16 at 08:50
Having said that, this doesn't help because I want to get the lib from a CDN with a script tag. Your method assumes that you will serve the lib and can therefore bundle it as a CommonJS style module that exports a require function. Unfortunately, that's not the problem I'm trying to solve. The starting point is `window.m1`. – Cool Blue Jul 06 '16 at 09:01

How to exclude library files from browserify bundle

2 Answers2

Linked