如何使用浏览器将实用程序lib包含在AngularJS应用中

Question

我有一个大的angularjs/express应用程序，我想开始在客户端和服务器之间共享代码，主要是小型公用事业库，例如：

// Name: utilities.js
module.exports.testUtilities = function () {
    console.log('testUtilities: Hello world!');
};

我现在尝试使用grunt-browserify：

设置 browserify

// Name: Gruntfile.js
browserify: {
    client: {
        src: ['crossplatform/**/*.js'],
        dest: 'app/scripts/crossplatformBrowserify.js'
    }
},

我成功地构建了我在index.html中包含的crossplatformBundle.js。

但是我无法从AngularJS客户端访问我的浏览代码：

// Name: MyAngularController.js
var utilities = require('./utilities');
utilities.testUtilities();

错误消息：require is undefined。

我看到了许多浏览问题的答案是捆绑所有客户端脚本的答案，但是如果可以的话，我宁愿避免使用，因为我想要在开发模式下单独的JS文件。

感谢我能得到的任何提示！

Answer 1

解决方案是定义浏览的"独立"捆绑包：

browserify: {
    client: {
        src: ['crossplatform/**/*.js'],
        dest: 'app/scripts/crossplatform.js',
        options: {
            browserifyOptions: {
                standalone: 'crossplatform'
            },
        }
    }
},

...这使我可以在浏览器中使用window.crossplatform.testUtilities()调用该方法。

更新：有关如何捆绑多个库/模块的更多示例，请参见此线程。