RequireJS. Сборка и оптимизация Angular-модулей

Категория: JavaScript

Руководство по сборке angular-модулей в пакеты в помощью утилиты r.js (от requirejs) для уменьшения количества запросов на сервер.

Примечание

Я пока не разобрался, но при сборке нескольких модулей в один файл, и при последующей загрузке вложенных пакетных зависимостей - модулям необходимо задавать имена:

define('angular-modules-pack', ['angular-route', 'restangular']);

Установить:

sudo npm install -g requirejs

Для сборки модуля (вместе с зависимостями) выполните:

r.js -o baseUrl=. mainConfigFile=scripts/requirejs-main.js name=core out=builds/core.js optimize=none
Внимание!

Ошибка: "Tracing dependencies for: <module name> Error: ENOENT: no such file or directory, open '<dependency.js>' In module tree: <module name>", указывает на то, что сборщик r.js не может определить путь к зависимостям модуля. Проверьте пути к модулям!

Ошибка: "Error: [$injector:unpr] Unknown provider: e (r.js requirejs)", скорее всего, указывает на то, что включена оптимизация скриптов и минимизированы имена подгружаемых сервисов/ангуляр-модулей. Добавьте параметр optimize=none при сборке пакета модулей утилитой r.js.

Можно вынести настройки сборки в отдельный конфигурационный файл build-core.cfg.js:

({
    baseUrl: '.',
    mainConfigFile: 'scripts/requirejs-main.js',
    paths: {
        '$':             'bower_components/jquery/dist/jquery',
        '_':             'bower_components/lodash/dist/lodash',
        'angular':       'bower_components/angular/angular',
    },
    name: 'modules/core',
    out: 'builds/core.js',
    optimize: 'none'
})
r.js -o build-core.cfg.js

Примеры конфигурации билдера-оптимизатора r.js:

paths.$=bower_components/jquery/dist/jquery
paths.jquery=empty:  - исчключить jQuery из сборки (если, например, хотите загрузить скрипт из CDN)

Дополнительные опции конфигурации сборки: https://github.com/requirejs/r.js/blob/master/build/example.build.js

Плагины gulp для сборки requirejs:

  • https://github.com/jorrit/gulp-requirejs
  • https://github.com/jlouns/gulp-requirejs-optimize
  • https://github.com/SteveSanderson/gulp-requirejs-bundler

#requirejs build modules, #requirejs optiomize modules

категория: JavaScript