RequireJS №1: с чего начать

В этой статье я расскажу, как запустить ваше веб-приложение с помощью requirejs. В основном я расскажу о:

  • Загрузить файлы Javascript
  • Конфигурация требует

А также мои лучшие практики будут добавлены в последнюю для вашего сведения. Теперь давайте начнем.

Загрузить файлы Javascript

Атрибут data-main — это специальный атрибут, который будет проверять require.js, чтобы начать загрузку скрипта.

Этот однострочный скрипт вызовет 3 действия:

  1. Браузер загружает scripts/require.js.
  2. require.js загружает scripts/main.js с тегом data-main.
  3. require.js устанавливает baseUrl в каталог script.

Таким образом, единственный скрипт, который нам нужен, это скрипт require.js. Все остальные файлы javascript будут загружены с помощью require.js.

Конфигурация требует

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

Установите конфигурацию перед загрузкой require.js

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

В этом примере указываются некоторые зависимости для загрузки, как только в require.js будет определена функция require():

Установить конфигурацию после загрузки require.js

Таким образом, вы не сможете снова использовать глобальную переменную require. Поскольку require уже используется в require.js.

Вместо этого вы можете использовать require.config().

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

Объедините все фрагменты

Не рекомендуется использовать встроенные скрипты. Поэтому, когда я начал использовать require.js, я следовал этому шаблону:

Используйте атрибут data-main для загрузки основного файла. И используйте require.config() в main.js для установки конфигурации requirejs.

использованная литература

https://requirejs.org/docs/api.html