使用grunt-browserify(> 2.0.2)作为转换工具很难获得browserify-shim
在grunt-browserify
2.0.2版本中, browserify-shim
已经从模块本身中被移除,并被转换为一个transform
,而不是在grunt-browserify
任务上的一个简单的option
。
用grunt-browserify
使用垫片的旧版本看起来是这样的:
'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' } } } }
这工作得很好,并围绕libs.js
模块生成一个包装,如下libs.js
:
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"]);
然而,基于(令人难以置信的稀疏和令人沮丧的)文档, grunt-browserify
shim的新版本被用作transform
,因此:
'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'] } }
而且,因为browserify-shim
的configuration现在完全基于package.json
configuration,所以我的package.json
如下所示:
"browser": { "angular": "./bower_components/angular/angular.js" }, "browserify-shim": { "angular": "angular" }
但是,这会生成一个如下的包装器:
(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]);
正如你所看到的,这个新的包装器中缺less一些东西。 似乎没有与在旧包装中分配的i10PRm
导出值等效。 据推测,这意味着我使用导出不正确,但我遵循browserify-shim
文档,这一切似乎相当简单。
会喜欢任何帮助或清晰的最新版本的grunt-browserify
( >= 2.0.2
)和browserify-shim
以及如何正确使用它们。
只是为了后代的缘故:我最终放弃了grunt-browserify
,只是使用了来自命令行的browserify
browserify-shim
。 它可以即时运作,完全没有问题。
我认为,三个库( browserify
, grunt-browserify
和browserify-shim
)的组合都是简单的更新和更改太快,以至于无法在更新时依赖它们一起工作。 放弃这个grunt
组件使得剩下的两个更容易pipe理。
browserify-shim的创build者似乎同意 :
…在我的经验中,每当有人在一个任务跑步者中包装browserify和browserify-shim(两者都可以在package.json中完美configuration),他们的生活就会变得更加艰难。
我也努力了这个设置,但我设法通过从我的Gruntfile.js
完全删除垫片设置,让Gruntfile.js
在package.json
处理它们。 在这里,我正在使用jquery
填充,你也可以看到我在下面运行的版本:
// 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" }
我的Gruntfile.js
的相关部分现在看起来像这样:
// portion of Gruntfile.js browserify: { bundleOptions: { debug: true }, src: 'js/src/main.js', dest: 'js/output.js' },
grunt:browserify
现在按预期工作,通过调用browserify
但允许它自己处理browserify-shim
。
Donot通过grunt watch
运行browserify,这不会反映你在中间所做的更改。
所以,只要你改变package.json
文件,通过grunt broswerify
运行grunt broswerify
任务