如何使用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。