2017-02-21 49 views
0

У меня есть большие AngularJS/Экспресс-приложение, где я хотел бы начать код обмена между клиентом и сервером, в основном, небольшие коммунальные библиотеки, например:Как включить утилиту lib в приложение AngularJS с помощью Browserify?

// 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.

Но я не на доступ к моему Browserified код от клиента AngularJS: сообщение

// Name: MyAngularController.js 

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

Ошибка: require is undefined.

Я вижу много обозреваемых вопросов, в которых ответ заключается в том, чтобы собрать ВСЕ клиентские скрипты, но я бы предпочел избежать этого, если смогу, поскольку я хочу, чтобы отдельные файлы JS были в режиме разработки.

Благодарен за любые советы, которые я могу получить!

ответ

0

Решение было определить «автономный» пакет для 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.