如何使用Browserify在AngularJS应用程序中包含实用程序库？

Question

我有一个大AngularJS /快速的应用程序，我想开始客户端和服务器之间共享代码，主要是小工具库，如：

// Name: utilities.js 

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

现在我想建立Browserify使用grunt-browserify：

// Name: Gruntfile.js 

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

我成功打造了crossplatformBundle.js，我包括我的index.html。

但我就不行了，从AngularJS客户访问我Browserified代码：

// Name: MyAngularController.js 

var utilities = require('./utilities'); 
utilities.testUtilities(); 

错误消息：require is undefined。

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

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

Answer 1

的解决方案是定义一个“独立”捆绑为Browserify：

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

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

更新：请参阅this thread for more examples of how to bundle multiple libraries/modules。