Difficulty getting browserify-shim working with gr

Question

In version 2.0.2 of grunt-browserify, browserify-shim was removed from the module itself and converted to be used as a transform, rather than a straightforward option on a grunt-browserify task.

The old version of using the shim with grunt-browserify would look as such:

'libs-dev': {
    src: [path.join('<%= config.dirs.browserLibs %>', 'angular', 'angular.js')],
    dest: path.join('<%= config.dirs.dest.dev %>', 'js', 'libs.js'),
    options: {
        shim: {
            angular: {
                path: path.join('<%= config.dirs.browserLibs %>', 'angular', 'angular.js'),
                exports: 'angular'
            }
        }
    }
}

This worked great, and generated a wrapper around the libs.js module as such:

require=(function(e,t,n){function i(n,s){if(!t[n]){if(!e[n]){var o=typeof require=="function"&&require;if(!s&&o)return o(n,!0);if(r)return r(n,!0);throw new Error("Cannot find module '"+n+"'")}var u=t[n]={exports:{}};e[n][0].call(u.exports,function(t){var r=e[n][1][t];return i(r?r:t)},u,u.exports)}return t[n].exports}var r=typeof require=="function"&&require;for(var s=0;s<n.length;s++)i(n[s]);return i})({"angular":[function(require,module,exports){
    module.exports=require('i10PRm');
},{}],"i10PRm":[function(require,module,exports){
    (function(global){(function browserifyShim(module, exports, define, browserify_shim__define__module__export__) {
        browserify_shim__define__module__export__(typeof angular != "undefined" ? angular : window.angular);
    }).call(global, undefined, undefined, undefined, function defineExport(ex) { module.exports = ex; });
})(window)
},{}]},{},["i10PRm"]);

However, based on the (incredibly sparse and frustrating) documentation, the new version of the shim within grunt-browserify is used as a transform, as such:

'libs-dev': {
    src: [path.join('<%= config.dirs.browserLibs %>', 'angular', 'angular.js')],
    dest: path.join('<%= config.dirs.dest.dev %>', 'js', 'libs.js'),
    options: {
        transform: ['browserify-shim']
    }
}

and, since browserify-shim's configuration is now entirely based on package.json configuration, my package.json looks as such:

"browser": {
    "angular": "./bower_components/angular/angular.js"
},
"browserify-shim": {
    "angular": "angular"
}

However, this generates a wrapper that looks like:

(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);throw new Error("Cannot find module '"+o+"'")}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=t[o][1][e];return s(n?n:e)},f,f.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){
    (function (global){
        __browserify_shim_require__=require;(function browserifyShim(module, exports, require, define, browserify_shim__define__module__export__) {
            browserify_shim__define__module__export__(typeof angular != "undefined" ? angular : window.angular);
    }).call(global, undefined, undefined, undefined, undefined, function defineExport(ex) { module.exports = ex; });
}).call(this,typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
},{}]},{},[1]);

As you can see, something's missing from this new wrapper; there doesn't seem to be an equivalent to the i10PRm export value assigned in the old wrapper. Presumably, this means I'm using exports incorrectly somehow, though I'm following the browserify-shim docs and it all seems fairly straightforward.

Would love any assistance or clarity regarding the newest versions of grunt-browserify (>= 2.0.2) and browserify-shim and how to use them together correctly.

Answer 1

Donot run browserify via grunt watch, this will not reflect changes done by you in middle.

So instead whenever you change package.json file, run browserify task by grunt broswerify

Answer 2

I struggled with this set up too, but I managed to get it working by completely removing the shim settings from my Gruntfile.js and letting browserify handle them in package.json. Here I'm using the shim with jquery, you can also see the versions I have running below:

// portion of package.json

"browser": {
    "jquery": "./js/lib/jquery-1.11.0.min.js"
},
"browserify-shim": {
    "jquery": "$"
},
"browserify": {
    "transform": [
        "browserify-shim"
    ]
},
"devDependencies": {
    "grunt": "~0.4.1",
    "grunt-cli": "~0.1.10",
    "browserify": "~3.44.2",
    "browserify-shim": "~3.4.1",
    "grunt-browserify": "~2.0.8"
}

The relevant part of my Gruntfile.js now looks like this:

// portion of Gruntfile.js

browserify: {
    bundleOptions: {
        debug: true
    },
    src: 'js/src/main.js',
    dest: 'js/output.js'
},

grunt:browserify now works as expected, by calling browserify but allowing it to handle browserify-shim by itself.

Answer 3

Just an update for posterity's sake: I ended up ditching grunt-browserify and just using browserify-shim with browserify from the command-line. It works instantly with no issues at all.

I've come to the belief that the combination of the three libs (browserify, grunt-browserify, and browserify-shim) are all simply being updated and changed too rapidly to be able to rely upon them working together as they're updated. Ditching the grunt component makes the remaining two much easier to manage.

The creator of browserify-shim seems to agree:

...in my experience whenever people wrap browserify and browserify-shim (both of which are perfectly configurable in package.json) inside a task runner, they are making their life a bit harder.