RequireJS - Краткое руководство

RequireJS - это библиотека JavaScript и загрузчик файлов, которая управляет зависимостями между файлами JavaScript и в модульном программировании. Это также помогает повысить скорость и качество кода.

RequireJS был разработан Дэвидом Марком, и его первоначальная версия v1.0.0 была выпущена в 2009 году. Это открытый исходный код, а версия 2.3.3 является его последним стабильным выпуском.

Зачем использовать RequireJS?

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

Особенности RequireJS

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

В этой главе мы поймем, как настроить среду для RequireJS. Для этого вам необходимо скачать последнюю версию библиотеки RequireJS. Вы можете скачать уменьшенную или подробную версию .

После загрузки нам нужно включить require.js файл в папке libs, и структура вашего проекта должна быть такой, как показано ниже -

projectname/
|--index.html
|--libs/
   |---main.js
   |---require.js
   |---helper/
      |----util.js

Нам нужно определить html-файл как index.html где RequireJS загружается, как показано ниже.

<html>
   <head>
      <script data-main = "libs/main" src = "libs/require.js"></script>
   </head>
   
   <body>
      <h1> RequireJS Sample Page </h1>
   </body>
</html>

Обратите внимание, что только require.js с вызовом RequireJS включается в тег скрипта для загрузки скрипта.

RequireJS в Node

Есть два способа получить адаптер Node.

npm - Вы можете установить последнюю версию requirejs из командной строки, как показано ниже.

npm install requirejs

Скачать r.js - Вы можете скачать r.jsфайл со страницы загрузки и источник изr.js страница репозитория .

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

Например -

<script data-main = "scripts/main" src = "scripts/require.js"></script>

Чтобы включить файл Require.js, вам необходимо добавить тег скрипта в html-файл. В теге скрипта добавьтеdata-mainатрибут для загрузки модуля. Это можно считать основной точкой входа в ваше приложение. Скрипты / основные является основным JavaScript - файл приложения , которое содержит конфигурацию RequireJS.

Варианты конфигурации

Ниже приведены параметры конфигурации, которые можно установить при загрузке первого модуля приложения.

baseUrl- Это путь маршрута для всех модулей, загружаемых через RequireJS. BaseUrl обозначается строкой, начинающейся с косой черты (/), содержащей протокол и заканчивающейся расширением «.js». Если baseUrl не указан, RequireJS использует путь к атрибуту основных данных как baseUrl.
paths- Он указывает сопоставления путей для модулей, относящихся к baseUrl. Он автоматически добавляет расширение .js к пути при сопоставлении имени модуля.
shim - Он обеспечивает использование библиотек сторонних разработчиков с RequireJS путем настройки их зависимостей и экспорта их глобальных значений.
map - Для данного модуля приложение использует один и тот же модуль разных версий для разных целей, разделяя их идентификаторы, чтобы использовать один и тот же код для разных условий.
config- Он предоставляет конфигурацию для модуля с помощью параметра конфигурации, и это можно сделать, используя специальную зависимость «модуль» и вызывая ееmodule.config() функция.
urlArgs- Аргументы строки запроса используются для выборки всех ресурсов, загружаемых с помощью RequireJS. Он используется для очистки кеша при неправильной конфигурации браузера или сервера.
waitSeconds- Он указывает количество секунд ожидания перед тем, как бросить вызов при загрузке скрипта. По умолчанию установлено значение «7» секунд, а «0» отключает тайм-аут.
packages - Предоставляет пакеты CommonJS для настройки модулей загрузки.
context - Он предоставляет имя для загрузки контекста, которое позволяет загружать различные модули на странице.
deps - Это массив зависимостей, который требуется, когда Require указан как объект конфигурации перед загрузкой RequireJS.
callback - Он выполняет функцию после загрузки зависимостей и требуется, когда Require указан как объект конфигурации перед загрузкой RequireJS.
xhtml - Он используется для создания элементов скрипта с помощью document.createElementNS(), если для этого параметра установлено значение true .
scriptType- Он определяет значение атрибута типа скрипта, используемого в документе. Тип по умолчанию - «текст / javascript».
skipDataMain- Пропускает сканирование основных атрибутов данных при загрузке модуля, если для этой опции установлено значение true .

Модуль в RequireJS является объектом с заданной областью и недоступен в глобальном пространстве имен. Следовательно, глобальное пространство имен не будет загрязнено. Синтаксис RequireJS позволяет быстрее загружать модули, не беспокоясь о отслеживании порядка зависимостей. Вы можете загрузить несколько версий одного и того же модуля на одну страницу.

Определение модулей

Модуль определяется с помощью define()функция; та же функция используется и для загрузки модуля.

Простые пары имя / значение

Если модуль представляет собой просто набор пар имени и значения, вы можете использовать следующий синтаксис:

define({
   state: "karnataka",
   city: "bangalore"
});

Определение функций

Модуль также может использовать функцию для фреймворков, не имея зависимостей. Это можно сделать, используя следующий синтаксис -

define(function () {
   
   //Do setup work here
   return {
      state: "karnataka",
      city: "bangalore"
   }
});

Определение функций с зависимостями

Если у модуля есть зависимости, размещение первого аргумента (массив имен зависимостей), второго аргумента (определяющая функция) и возвращаемого объекта, который определяет модуль, показано в следующем синтаксисе:

define(["./mnc", "./startup"], 
   function(mnc, startup) {
        
      return {
         state: "karnataka",
         city: "bangalore",
      
         addCompany: function() {
            mnc.decrement(this);
            startup.add(this);
         }
      
      }
   }
);

Определение модуля как функции

Модуль не обязательно должен возвращать только объекты, любое допустимое значение из функции также может быть возвращено. Следующий синтаксис используется для определения модуля как функции -

define(["./mnc", "./startup"],
   function(mnc, startup) {
       
      return function(title) {
         return title ? (window.title = title) :
         startup.storeName + ' ' + mnc.name;
      }
      
   }
);

Определение модуля с именем

В некоторых случаях вам может потребоваться включить имя модуля в качестве первого аргумента для define(). Это можно сделать, используя следующий синтаксис -

define("js2/title",
   ["js1/mnc", "js1/startup"],
   
   function(mnc, startup) {
      //Define js2/title object in here.
   }
   
);

Загрузка модуля

Определить () функция может быть использована для загрузки модулей (модуль может быть объект, функция, класс или код , который выполняется после загрузки модуля). Вы можете загружать разные версии одного и того же модуля на одной странице. Различные версии можно анализировать в одном порядке, даже если они загружены в другом порядке.

Синтаксис

define(['module1', 'module2'], function (module1, module2) {
   //define the module value by returning a value
   return function () {};
});

Вы можете передать список имен модулей при определении модуля, и RequireJS можно использовать для извлечения этих модулей перед выполнением модуля. Эти модули могут быть переданы как параметрыdefinition function.

пример

В следующем примере показано использование функции define () при загрузке модулей. Создайте html-файл с именем index.html и поместите в него следующий код -

<!DOCTYPE html>
<html>
   <head>
      <title>Define() Function</title>
      <script data-main = "main" src = "require.js"></script>
   </head>
   
   <body>
      <h2>RequireJS Define() Function Example</h2>
   </body>
</html>

Создать jsфайл с именем main.js и добавьте в него следующий код -

define(function (require) {
   var myteam = require("./team");
   var mylogger = require("./player");
   alert("Player Name : " + myteam.player);
   mylogger.myfunc();
});

Теперь создайте еще два jsфайлы с именами team.js и player.js и поместите следующий код соответственно:

team.js

define({
   player: "Sachin Tendulkar",
   team : "India"
});

player.js

define(function (require) {
   var myteam = require("./team");

   return {
      myfunc: function () {
         document.write("Name: " + myteam.player + ", Country: " + myteam.team);
      }
   };
});

Вывод

Откройте HTML-файл в браузере; вы получите результат, как на следующем снимке экрана -

Нажмите на кнопку «ОК», вы получите еще один вывод из модулей -

В этой главе мы обсудим оптимизацию в RequireJS. Оптимизатор в RequireJS имеет следующие характеристики:

Объединяет файлы сценариев вместе с помощью UglifyJS для использования по умолчанию или Closure Compiler для использования Java
Объединяет файлы CSS вместе.

Оптимизатор - это компонент r.jsадаптер для Node и Nashorn . Он разработан, чтобы быть частью процесса сборки, а не для процесса разработки.

пример

После загрузки r.js в папку вашего проекта структура папки должна выглядеть, как показано ниже -

projectfolder/
   |-->index.html
   |-->CSS/
      |--->main.css
      |--->other.css
   |-->libs
      |--->require.js
      |--->main.js
         |--->dependent1.js
         |--->dependent2.js
         |--->dependent3.js

Ваш HTML-файл будет выглядеть, как показано ниже -

<html>
   <head>
      <script data-main = "libs/main" src = "libs/require.js"></script>
   </head>
   
   <body>
      <h1> RequireJS Sample Page </h1>
   </body>
</html>

Ваш файл main.js будет выглядеть, как показано ниже -

require(["dependent1", "dependent2", "dependent3"], function (dependent1, dependent2, 
   dependent3) {
});

Ваш файл main.css будет выглядеть, как показано ниже -

@import url("other.css");

.app {
   background: transparent url(../../img/app.png);
}

Базовая настройка оптимизатора

Вы можете использовать аргументы командной строки или свойства построения профиля для настройки проекта, оба они взаимозаменяемы.

Ниже приведен синтаксис командной строки -

node r.js -o baseUrl = . paths.jquery = content/path/jquery 
   name = main out = main-built.js

Ниже приведен синтаксис для создания профиля -

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

После этого вы можете передать имя профиля сборки оптимизатору в командной строке, как показано ниже -

node r.js -o build.js

В синтаксисе аргументов командной строки есть некоторые недостатки. Комбинированное использование аргументов командной строки или свойств построения профиля может преодолеть эти недостатки.

Оптимизация одного файла JS

Чтобы оптимизировать отдельный JS-файл, вам необходимо создать JS-файл, содержащий содержимое всех его зависимостей. Ваш файл должен выглядеть, как показано ниже -

({
   baseUrl: "js/shop",
   paths: {
      "jquery": "jquery",
      "backbone": "backbone",
      "underscore": "underscore"
   },
   
   shim: {
      "backbone": {
         "department": ["underscore", "jquery"],
         "dependent": "Backbone"  
      },
      
      "underscore": {
         exports: "_" 
      }
   },
   
   name: "../main",
   out: "../built/js/main.js"
})

Теперь вы можете создать файл main.js, в котором есть все зависимости для приложения. Этот файл используется в файле HTML для загрузки всех файлов JS одним запросом. Обратите внимание, что созданные файлы не должны находиться в каталоге исходного кода; файлы должны быть в копии проекта.

Использование ресурсов CDN

Оптимизатор не загружает скрипты с использованием сетевых ресурсов / CDN (Content Delivery Network). В случае, если скрипты необходимо загрузить с помощью CDN, вам необходимо сопоставить эти файлы с именем модуля и загрузить файлы по локальному пути к файлу. Вы можете использовать специальное слово «пустой» в конфигурации пути профиля сборки, как показано в следующем синтаксисе:

({
   baseUrl: "js",
   name: "mainCDN",
   out: "js/mainCDN-built.js",
   
   paths: {
      jquery: "empty:"
   }
   
})

Главный файл будет выглядеть, как показано ниже -

requirejs.config({
   paths: {
      'jquery': 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min'
   }
});

require(['jquery'], function ($) {
});

Оптимизация одного файла CSS

Файлы CSS оптимизируются с использованием следующих параметров непосредственно в командной строке, как показано ниже:

node ../../r.js -o cssIn = main.css out = main-built.css

Файлы CSS также можно оптимизировать в файле сборки, используя те же свойства, что и показаны ниже -

...
cssIn:"main.css",
out:"main-built.css"
...

Оба вышеуказанных метода разрешены и создадут файл с именем projectfolder / css / mainbuild.css . В этом файле будет правильно настроено содержимое main.css, пути url () и удалены комментарии.

Оптимизация всего проекта

Оптимизатор использует профиль сборки для оптимизации всех css и jsфайлы. В следующем примере создается файл build.js .

({
   baseUrl: "js/shop",
   appDir: '.',
   paths: {
      "jquery": "jquery",
      "backbone": "backbone",
      "underscore": "underscore"
   },
   
   shim: {
      "backbone": {
         "deps": ["underscore", "jquery"],
         "exports": "Backbone"  
      },
      
      "underscore": {
         exports: "_" 
      }
   },
   
   optimizeCss: "standard.keepLines",
   modules: [
      {
         name: "app"
      }
   ],
   
   dir: "../built"
})

Build.js файл инструктирует RequireJS скопировать все папки приложения (AppDir параметр) в папку вывода построен (реж параметра) и применять все оптимизации в файлы , расположенные в папке вывода. Выполните следующую команду, чтобы создать профиль в папке приложения -

node r.js -o build.js

RequireJS использует jQuery в качестве другой зависимости и регистрирует как именованный модуль jquery в нижнем регистре и по умолчанию также регистрирует себя с помощью глобальных функций $ и jQuery при использовании AMD / RequireJS.

Загрузка jQuery

require(['jquery'], function($) {
   //code here
}

Вы можете загрузить несколько пользовательских библиотек вместе с jQuery, как показано ниже -

require(['custom_library_path','jquery'], function(load_library,$) {
   //related code of $ and load_library
});

В следующей таблице показано использование jQuery с RequireJS для указания их зависимостей.

Sr.No.	Типы и описание
1	Использование Shim Config jQuery использует конфигурацию оболочки для определения зависимостей для подключаемых модулей jQuery.
2	Загрузка jQuery из CDN jQuery использует CDN для определения зависимостей для плагинов jQuery.

Адаптер Node можно использовать вместе с реализацией Require и пути поиска Node. Если RequireJS не использует конфигурацию модуля, вы можете использовать существующие модули на основе Node, не меняя их. Вы можете установить пакеты узлов в каталог node_modules проекта с помощью команды npm.

Node будет загружать модули только с локального диска, а параметры конфигурации, такие как карта, пакеты, пути и т. Д., Будут применяться только тогда, когда модуль загружен с помощью RequireJS.

Установка узла

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

npm install requirejs

Вы также можете установить узел следующими способами:

Вы можете скачать r.js по этой ссылке и сохранить его в папке своего проекта.
Получить исходный код из r.js хранилища или установить его через узел dist.js .

Использование узла

Чтобы использовать узел, вам нужно иметь require ('requirejs') и переместить функцию require в конфигурации в файл main.js верхнего уровня.

Например -

var requirejs = require('requirejs');

requirejs.config({
   //load the mode modules to top level JS file 
   //by passing the top level main.js require function to requirejs
   nodeRequire: require
});

requirejs(['name1', 'name2'],
   function (name1, name2) {
      //by using requirejs config, name1 and name2 are loaded
      //node's require loads the module, if they did not find these
   }
);

Сборка узловых модулей с помощью AMD или RequireJS

Вы можете заставить модуль кода работать с RequireJS и Node, не требуя пользователей библиотеки, а затем использовать пакет amdefine для выполнения этой работы.

Например -

if (typeof define !== 'function') {
   var define = require('amdefine')(module);
}

define(function(require) {
   var myval = require('dependency');

   //The returned value from the function can be used 
   //as module which is visible to Node.
   return function () {};
});

Оптимизатор как узел-модуль

Модуль Node использует оптимизатор RequireJS в качестве метода оптимизации , используя вызов функции вместо использования инструмента командной строки.

Например -

var requirejs = require('requirejs');

var config = {
   baseUrl: '../directory/scripts',
   name: 'main',
   out: '../build/main-built.js'
};

requirejs.optimize(config, function (buildResponse) {

   //The text output of the modules specify by using buildResponse 
   //and loads the built file for the contents
   //get the optimized file contents by using config.out 
   var contents = fs.readFileSync(config.out, 'utf8');
}, function(err) {
   //code for optimization err callback
});

Dojo - это набор инструментов JavaScript, основанный на модульной архитектуре AMD, который предоставляет дополнительные модули для добавления дополнительных функций к веб-приложению, а также экономит время и масштаб в процессе разработки веб-приложений.

пример

В следующем примере показано использование Dojo вместе с RequireJS. Создайте html-файл с именем index.html и поместите в него следующий код -

<!DOCTYPE html>
<html>
   <head>
      <title>RequireJS Dojo</title>
      <script data-main="app" src="lib/require.js"></script>
   </head>
   
   <body>
      <h2>RequireJS  Dojo</h2>
      <p>
         Hello... ...
      </p>
   </body>
</html>

Создать jsфайл с именем app.js и добавьте в него следующий код -

require ({
   //You can configure loading modules from the lib directory
   baseUrl: 'lib',
   
   paths: {
      //mapping of package
      dojo: 'http://sfoster.dojotoolkit.org/dojobox/1.7-branch/dojo'
   }
   
}, [
      //modules which we are using here
      'dojo/dom'
   ], function(dom) { 
   
      //using the 'byId' method from dom module
      var mydojo = dom.byId('dojo_val')
      mydojo.innerHTML = "The text is displaying via dojo/dom";   
   }
);

Вывод

Откройте HTML-файл в браузере; вы получите следующий вывод -

Формат модуля определяется CommonJS. Он определен без предоставления браузеров, равных другим средам JavaScript. Поэтому спецификация CommonJS рекомендует транспортные форматы и асинхронный файл require . Вы можете легко преобразовать традиционный формат модуля CommonJS для работы с RequireJS. Но все модули не будут преобразованы в новый формат. Некоторые из исключений перечислены ниже -

Модули с условным кодом для выполнения вызова require.
Модули с круговыми зависимостями.

Ручное преобразование

Модули CommonJS можно вручную преобразовать в формат RequireJS, используя следующий синтаксис:

define(function(require, exports, module) {
   //place CommonJS module content here
});

Инструмент преобразования

Модули CommonJS можно преобразовать в формат RequireJS с помощью инструмента преобразования проектов r.js , встроенного в файл r.js. Вы должны указать путь к файлу, который нужно преобразовать, и папку вывода, как показано ниже -

node r.js -convert path/to/commonjs/modules/ path/to/output

Установка экспортируемого значения

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

define(function (require) {
   var name = require('name');

   //Define the module as exporting a function
   return function () {
      name.doSomething();
   };
});

Альтернативный синтаксис

Альтернативный способ указать зависимости - использовать аргумент массива зависимостей define () . Но порядок имен в массиве зависимостей должен соответствовать порядку аргументов, переданных в функцию определения define (), как показано ниже -

define(['name'], function (name) {
   
   return function () {
      name.doSomething();
   };
});

Загрузка модулей из пакетов CommonJS

Чтобы узнать о расположении и атрибутах пакетов, модули загружаются в пакеты CommonJS с помощью RequireJS путем настройки конфигурации RequireJS.

Инструмент оптимизации

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

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

text
domReady
i18n
Загрузка CSS

текст

Текст плагин используется для загрузки текстовых ресурсов на основе асинхронно , который в основном используется для вставки содержимого HTML в файлах JavaScript. Его можно загрузить при использовании текста! префикс в любом вызове модуля require или define и передать расширение файла плагину. По сравнению с обычной загрузкой модуля текстовый плагин загружает модули с помощью XHR и не добавляет код в заголовок какscript тег.

Ресурс текстового файла может быть включен как зависимость в код как -

require(["mymodule", "text!mymodule.html", "text!mymodule.css"],
   
   function(mymodule, html, css) {
      //the html and css variables will be the text
      //of the mymodule.html file and mymodule.css files respectively
   }
);

domReady

RequireJS можно использовать для загрузки скриптов до того, как DOM будет готов, и разработчики могут взаимодействовать с DOM, только когда скрипты загружаются полностью. Иногда скрипты могут быть загружены до того, как DOM будет готов. Итак, чтобы преодолеть эту проблему, RequireJS предоставляет современный подход, называемый событием DOMContentLoaded, которое вызывает функцию domReady, когда DOM готов.

require(['domReady'], function(domReady) {
   
   domReady(function() {
      //the domReady function is called when DOM is ready 
      //which is safe to manipulate DOM nodes in this function
   });
});

i18n

Его можно использовать с несколькими языками, которые обеспечивают i18nподдержка пакета, которая будет загружена автоматически, когда модуль или зависимость указывает "i18n!" приставка. Чтобы использовать это, загрузите его и поместите в тот же каталог, где находится ваш основной файл JavaScript. Поместите этот плагин в каталог с именем "nls", чтобы найти файлы локализации.

Например, предположим, что у нас есть один файл js с именем country.js со следующим содержимым, и поместите его в каталог как mydirectory / nls / country.js -

define({
   
   "root": {
      "india": "india",
      "australia": "australia",
      "england": "england"
   }
});

Вы можете добавить конкретный перевод в файл, используя языковой стандарт fr-fr, и приведенный выше код изменится как -

define({
   
   "root": {
      "title": "title",
      "header": "header",
      "description": "description"
   },
   
   "es-es": true
});

Затем укажите файл в mydirectory / nls / es-es / country.js со следующим содержимым -

define({
   
   "root": {
      "title": "título",
      "header": "cabecera",
      "description": "descripción"
   },
   
   "es-es": true
});

Вы можете установить языковой стандарт, передав его плагину с помощью конфигурации модуля в файле main.js, как показано ниже -

requirejs.config({
   
   config: {
      //set the config for the i18n plugin
      
      i18n: {
         locale: 'es-es'
      }
      
   }
});

Загрузка CSS с использованием RequireJS

Вы можете использовать некоторые плагины для загрузки файла CSS, просто добавив в заголовок ссылку для загрузки файла CSS.

CSS можно загрузить с помощью вашей собственной функции, как показано ниже -

function myCss(url) {
   var mylink = document.createElement("mylink");
   mylink.type = "text/css";
   mylink.rel = "stylesheet";
   mylink.href = url;
   document.getElementsByTagName("head")[0].appendChild(mylink);
}