Компиляция приложения requires с помощью Node.js

Часто при работе над сложными javascript-приложениями возникает желание свести к минимуму число подключаемых файлов, а также сократить размер самих файлов путем минифицации. Отличным инструментом для таких целей является известная библиотека Requirejs, о которой и пойдет речь.

Надо отметить, что разработчики requirejs проделали отличную работу в целом и в частности, что касается документации, которая позволяет быстро разобраться, как правильно подключать requirejs в свой проект. Более того, на Хабре уже была обзорная статья, посвященная основам работы с requirejs, поэтому я сразу перейду к вопросам оптимизации.

Компилятор в requirejs представляет собой модуль nodejs и js-файл оптимизатора. Компилировать можно и с помощью JAVA, но разработчики рекомендуют именно node, тем более, что для этого не требуется особого опыта работы с данным движком.

Если у вас еще не установлен nodejs, скачайте актуальную версию c официальной страницы. Скачайте файл оптимизатора и поместите его в папку с вашими js-скриптами, которые вы собираетесь оптимизировать. Далее вам нужно подключить модуль requirejs. В nodejs это выполняется предельно просто. Откройте консоль в папке, в которой находится скачанный ранее файл оптимизатора, и выполните простую команду npm install requirejs, или же в любой другой папке npm install -g requirejs. Все. Оптимизатор готов к работе.

Все команды выполняются вызовом node.js оптимизатора r.js. Для этого необходимо выполнить простую команду в командной строке node r.js –o [набор опций для компиляции]. К примеру, команда node r.js -o baseUrl=. paths.jquery=vendors/jquery name=main out=main-out.js предполагает, что мы хотим оптимизировать содержимое файла main.js, который находится в той же папке, что и r.js (параметр baseUrl), и вывести результат в файл main-out.js, при этом для подключаемой библиотеки jquery задается короткое обращение «jquery».

Однако постоянно описывать все параметры в командой строке не слишком удобно, поэтому существует более практичный вариант команды node r.js –o buildConfigFilename.js, в котором все параметры компиляции описываются в отдельном файле, назовем его buildConfigFilename.js. Для приведенного примера содержимое файла конфигурации будет следующим:

 ({     baseUrl: ".",     paths: {         jquery: "vendors/jquery"     },     name: "main",     out: "main-out.js" }) 

Практически всегда, когда приходится иметь дело с документацией, проще всего разобраться в сути, имея конкретные примеры. Поэтому я предлагаю пройтись по различного рода, что называется, примерам из жизни, с которыми столкнется каждый, кто захочет разобраться в оптимизации с помощью requirejs.

Итак, начнем. Чаще всего, нескомпилированное приложение подключается примерно таким образом:

 <script data-main="/js/main" src="/js/vendor/requirejs/require-2.1.5.js"></script> 

Где в основном файле помимо инициализации приложения задаются его настройки:

 require.config({}); 

Среди которых, как правило, именования путей, объявление зависимостей:

 require.config({         paths: {             'jquery': 'vendor/jquery/jquery-1.9.1.min',             'angular': 'vendor/angularjs/angular-1.0.5'         },         shim: {             'jquery': {                 exports: 'jQuery'             },             'angular': {                 deps: ['jquery'],                 exports: 'angular'             },                         'vendor/jquery/jquery.tinyscrollbar.min': {                 deps: ['jquery']             }       } }); 

Понятно, что при компиляции вам нужно будет продублировать данные настройки в списке опций компилятора для его адекватной работы. Однако от этого можно избавиться, если вынести настройки приложения в отдельный файл, и, в этом случае, при разработке можно использовать подключение в виде:

 <script data-main="/js/main" src="/js/vendor/requirejs/require-2.1.5.js"></script> <script src="/js/config.js"></script> 

А при компиляции внести опцию в конфигурационный файл:

 ({        mainConfigFile:”config.js” }) 

И теперь компилятор будет знать все, что ему требуется для адекватной обработки ваших файлов. Эти же настройки можно указать и напрямую, синтаксис полностью дублирует обычные настройки:

 ({         paths: {             'jquery': 'vendor/jquery/jquery-1.9.1.min',             'angular': 'vendor/angularjs/angular-1.0.5'         },         shim: {             'jquery': {                 exports: 'jQuery'             },             'angular': {                 deps: ['jquery'],                 exports: 'angular'             },                         'vendor/jquery/jquery.tinyscrollbar.min': {                 deps: ['jquery']             } }) 

Однако, в этом случае, вам придется, каждый раз при компиляции переносить все конфигурации вручную, что, мне кажется, не слишком удобным.

Теперь, предположим, что вы по какой-то причине разместили r.js вне папки с вашим приложением.

Проблемы в этом никакой нет, надо лишь прописать путь до корня приложения, в конкретном случае:

 ({       appDir:”js”,       mainConfigFile:”js/config.js” }) 

Дальше надо понимать, что при компиляции вашего main.js, require вставит в main-out.js скрипты, которые описаны в зависимостях вашего main. Разумеется, ни config.js, ни саму библиотеку с requirejs в ваш билд не вставит, то есть их по-прежнему нужно будет подключать отдельным запросом. Ничего страшного в этом нет, однако, если уж оптимизировать, то по полной программе. Тем более, что решается это достаточно просто, путем указания списка файлов, которые необходимо вставить в билд при компиляции:

 ({       deps:[ 'vendor/requirejs/require-2.1.5','config'] }) 

Пока что мы говорили про оптимизацию конкретного файла main.js, но предположим, что на нашем сайте несколько страниц с уникальным функционалом и целесообразно сделать по отдельному «main»-файлу для каждой из них. Пускай их будет три: index, welcome, movie. И мы хотим, чтобы для каждого из этих файлов были скомпилированы своим билд-версии с подключением настроек и библиотеки requirejs. Для этого нам нужно отказаться от приведенных ранее опций:

 ({         name: "main",     	out: "main-out.js" }) 

И заменить их на:

 ({     baseUrl:’app’,     modules:[         {             name:'indexPage'                  },         {             name:'moviePage'         },         {             name:'welcomePage'         }     ],     dir:'app-built' }) 

Где под модулями по сути понимаются наши «main»-файлы. При этом надо отметить, что в процессе оптимизации будет создана полная копия вашей baseUrl-директории с оптимизированными файлами. Название данной копии задается опцией dir.

Напоследок скажу, что данная статья, конечно, не претендует на доскональный обзор всех возможностей компилятора. Я хотел скорее показать, насколько просто использовать оптимизацию requirejs в своих проектах, и возможно помочь кому-то сделать первый шаг в этом направлении.

Полезные ссылки:
Документация оптимизатора
Полный список опций