Difficulty getting browserify-shim working with grunt-browserify (> 2.0.2) as transform

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

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.