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