Надо отметить, что разработчики 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 в своих проектах, и возможно помочь кому-то сделать первый шаг в этом направлении.
Полезные ссылки:
Документация оптимизатора
Полный список опций
ссылка на оригинал статьи http://habrahabr.ru/post/178793/
Добавить комментарий