require() 使用 gulp angular browserify 返回空对象答案

【问题标题】：require() returning empty object with gulp angular browserifyrequire() 使用 gulp angular browserify 返回空对象
【发布时间】：2015-07-16 03:08:43
【问题描述】：

我在使用 gulp 构建项目时遇到问题，该项目在我使用 bower 下载的外部库上运行 browserify 任务（使用 debowerify）。其中一个库 - angular-gridster - 已更新为使用 UMD 模式，现在它在对 angular 的引用为空对象时引发错误。

这是 angular-gridster.js 文件的开始方式：

(function(root, factory) {

    'use strict';

    if (typeof define === 'function' && define.amd) {
        // AMD
        define(['angular'], factory);
    } else if (typeof exports === 'object') {
        // CommonJS
        module.exports = factory(require('angular'));
    } else {
        // Browser, nothing "exported". Only registered as a module with angular.
        factory(root.angular);
    }
}(this, function(angular) {

'use strict';

// This is throwing my error
return angular.module('gridster', [])

它在尝试调用 angular.module() 时抛出错误“angular.module 不是函数”。在调试它时，我可以看到 angular 只是一个空对象，并且没有正确加载。我不确定这是否是 require() 方法或 gulp 或 browserify 或 debowerify 的问题......

这是我的 gulp 任务

gulp.task('dependencies', function() {
gulp.src(paths.dependencies)
    .pipe(browserify({
        insertGlobals: true,
        debug: true,
        transform: ['debowerify']
    }).on('error', gutil.log))
    .pipe(concat('3rdparty.js'))
    .pipe(gulp.dest('www/js'));

});

有什么想法吗？谢谢！

【问题讨论】：

您是否尝试将您的库移动到 node_modules 并尝试 require() 它？我在使用带有 debowerify 的 browserify 时遇到了很多问题，因为 bower 库的依赖项只是查看 bower lib，而 bower 没有像 node_modules 这样的树。它可能会在错误的位置查看错误的文件夹。您还应该提供使用您尝试导入的每个库的目录结构和 package.json
不幸的是，我通过 bower 安装了许多其他依赖于角度的组件，所以如果我尝试将其移至节点模块，我会遇到很多错误

标签： javascript angularjs gulp bower browserify

【解决方案1】：

我设法解决了这个问题，就是调用 require() 函数，然后将现在的全局变量 angular 传递给 factory() 方法。

if (typeof define === 'function' && define.amd) {
    // AMD
    define(['angular'], factory);
} else if (typeof exports === 'object') {
    // CommonJS
    require('angular');
    module.exports = factory(angular);
} else {
    // Browser, nothing "exported". Only registered as a module with angular.
    factory(root.angular);
}

【讨论】：