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.
