使用grunt-browserify（> 2.0.2）作为转换工具很难获得browserify-shim [英] Difficulty getting browserify-shim working with grunt-browserify (> 2.0.2) as transform
问题描述
在 grunt-browserify 版本2.0.2中， browserify-shim 已从模块中移除并转换作为转换使用，而不是简单的选项在 grunt-browserify 任务。
使用
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 模块：
require =（function（e，t，n ）{函数i（n，s）{if（！t [n]）{if（！e [n]）{var o = typeof require ==function&& require; if（！s&& amp; ; o）return o（n，！0）; if（r）return r（n，！0）; throw new Error（Can not 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'）; （函数（全局）{（函数browserifyShim（模块，出口，定义，browserify_shim__define__module__export__））{$ b $，$}}，i10PRm b browserify_shim__define__module__export__（typeof angular！=undefined？angular：window.angular）;
}）。call（global，undefined，undefined，undefined，function defineExport（ex）{module.exports = ex;}）;
}）（window）
}，{}]}，{}，[i10PRm]）;
然而，基于（令人难以置信的稀疏和令人沮丧的）文档， new 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'） ，
选项：{
transform：['browserify-shim']
}
}
，因为 browserify-shim 的配置现在完全基于 package.json $配置，我的 package.json 看起来像这样：
browser：{
angular：./bower_components/angular/angular.js
}，
browserify-shim：{
angular：角度
然而，这会生成一个包装呃，看起来像：
pre $ code>如果（！u&& a）返回一个（o，！0）;如果（！ if（i）return i（o，！0）; throw new Error（Can not 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]）;
正如您所看到的，这个新包装中缺少一些东西;似乎没有与旧包装中分配的 i10PRm 导出值等效。据推测，这意味着我以某种方式错误地使用了导出，尽管我遵循 browserify-shim 文档，并且这一切似乎相当简单。
想要获得最新版本的 grunt-browserify （> = 2.0.2 ）和 browserify-shim 以及如何正确使用它们。 只是为了后人的缘故：我最终放弃了 grunt-browserify ，只是使用 browserify-shim 在命令行中输入 browserify 。它完全没有问题。
我相信三个库的组合（ browserify ， grunt-browserify 和 browserify-shim ）都只是被更新和更改得太快而不能能够依靠他们一起工作，因为他们更新。删除 grunt 组件可以让其余两个组件更容易管理。
browserify-shim 似乎同意了：
...根据我的经验，每当有人在任务运行器中封装browserify和browserify-shim（两者都可以在package.json中完美配置）时，他们会让自己的生活变得更加困难。
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.
这篇关于使用grunt-browserify（> 2.0.2）作为转换工具很难获得browserify-shim的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
