在 grunt-browserify 的 2.0.2 版本中，browserify-shim 已从模块本身中删除并转换为用作 transform，而不是 grunt-browserify 任务上的直接 option。

在 grunt-browserify 中使用 shim 的 old 版本如下所示:

'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){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 的配置现在完全基于 package.json 配置，我的 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]);

如您所见，这个新包装器缺少一些东西；似乎没有等效于旧包装器中分配的 i10PRm 导出值。据推测，这意味着我以某种方式错误地使用了导出，尽管我正在关注 browserify-shim 文档，这一切看起来都相当简单。

希望获得有关 grunt-browserify (>= 2.0.2) 和 browserify-shim 最新版本的任何帮助或说明，以及如何正确搭配使用。

最佳答案

只是为了后代的利益而更新:我最终放弃了 grunt-browserify 并仅使用 browserify-shim 和命令中的 browserify -线。它可以立即运行，完全没有问题。

我相信三个库(browserify、grunt-browserify 和 browserify-shim)的组合都只是简单地更新和更改太快，以至于无法依赖它们在更新时协同工作。放弃 grunt 组件使剩下的两个组件更易于管理。

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.

关于javascript - 难以让 browserify-shim 使用 grunt-browserify (> 2.0.2) 作为转换，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23019194/