Сборка библиотеки с помощью RequireJS

В нашем примере «mylib» отображается на «../main», то есть относительно baseUrl
Обратите внимание, что мы baseUrlpaths.js Здесь вы указываете, как модули отображаются на файлы, такие как jquerymylib

include — модули, которые мы хотим включить в процесс оптимизации. Зависимости, которые требуются включенными модулями, включены неявно. В нашем случае mainmylibjquery Мы также включаем almond

exclude — модули, которые мы хотим исключить из процесса оптимизации. В нашем случае мы исключаем jquery Потребители встроенной библиотеки предоставят библиотеку jQuery. Мы увидим это, когда будем использовать нашу библиотеку позже.

out — имя оптимизированного выходного файла.

wrap — заключает в сборочный пакет начальный и конечный текст, указанный в wrap Оптимизированный выходной файл выглядит следующим образом: wrap.startwrap.end wrap.startwrap.end

миндальный

Встроенная библиотека не включает require.js в файл, а использует миндаль. almond — это небольшая реализация AMD API, которая заменит require.js.

Упаковка нашей библиотеки

В конфиге r.js мы обернули нашу библиотеку wrap.startwrap.end Мы также включили миндаль в нашу библиотеку, это сделает нашу библиотеку автономной, чтобы ее можно было использовать без RequireJS через глобальные переменные браузера или как модуль AMD через requirejs.

File: wrap.start

 (function (root, factory) {
  if (typeof define === 'function' && define.amd) {
    // AMD.
    define(['jquery'], factory);
  } else {
    // Browser globals.
    root.mylib = factory(root.$);
  }
}(this, function($) {

Наши включенные модули mainmylibalmondwrap.startwrap.end

File: wrap.end

 // Register in the values from the outer closure for common dependencies
  // as local almond modules
  define('jquery', function() {
    return $;
  });

  // Use almond's special top level synchronous require to trigger factory
  // functions, get the final module, and export it as the public api.
  return require('mylib');
}));

Если потребитель использует загрузчик AMD, то встроенный файл будет запрашивать «jquery» в качестве зависимостей AMD. Если потребитель использует глобальные переменные браузера, библиотека возьмет переменную $

Использование библиотеки с RequireJS

Мы закончили с нашей библиотекой, теперь давайте на самом деле используем ее, создавая приложение requirejs.

Файл: app.js

 define(['jquery', 'mylib'], function($, mylib) {
  // $ is jquery
  // mylib is mylib that is:
  // {
  //   version: 'version 0.0.1 jQuery version: xxx',
  //   mylib: 'mylib'
  // }
});

Ничего особенного, это еще один модуль, требующий jQuery и mylib. Когда модуль определен с помощью define Это означает, что наше приложение запускается не только с определения этого модуля. Теперь давайте посмотрим, как настроить RequireJS и выполнить этот модуль, который является нашим приложением.

Настройка RequireJS для браузера

Мы настроим RequireJS и запустим наш модуль приложения в одном файле. Хотя есть разные способы сделать это.

Файл: common.js

 requirejs.config({
  baseUrl: '../lib',
  paths: {
    'jquery': 'jquery/dist/jquery.min',
    'underscore': 'underscore/dist/underscore',
    'backbone': 'backbone/backbone',
    'mylib': 'mylib/dist/mylib',
    'app': '../app'
  },
  shim: {
    'jquery': {
      exports: '$'
    },
    'backbone': {
      deps: ['jquery', 'underscore'],
      exports: 'Backbone',
    },
    'underscore': {
      exports: '_'
    }
  }
});

require(['app/app'], function(App) {
  // app module is available here
  // you can start your application now
  // this is immediately called because
  // we used `require` instead of `define`
  // to define this module.
});

baseUrlpaths Дополнительное значение конфигурации здесь:

shim : Конфигурирует зависимости и экспорт для традиционных скриптов «globals браузера», которые не используют define() Например, Backbone — это не модуль AMD, а глобальный браузер, который экспортирует Backboneexports В нашем примере модуль также зависит от jQuery и Underscore , поэтому мы указываем это с помощью deps Сценарии в массиве depsexports

Обратите внимание, что вы также можете использовать r.js в этом проекте приложения, что потребует отдельной настройки. Но не смущайтесь этим. Я не буду вдаваться в подробности о том, как это сделать, но это похоже на то, что мы сделали для нашей библиотеки. Смотрите пример конфигурации сборки для дальнейшего использования.

требуют против определения

Позже мы используем require Иногда definerequire definerequire Часто в качестве основного модуля ввода у вас будет один requiredefine

Загрузка скриптов

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

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

Вывод

В этой статье мы создали библиотеку и приложение, которое использует эту библиотеку с RequireJS. Мы узнали, как настроить оптимизатор r.js и как настроить RequireJS в браузере. Наконец, мы узнали, как использовать RequireJS для определения и использования модулей AMD. Это сделало наш код хорошо структурированным и организованным.

Я использовал этот пример репозитория libglobal в этом уроке для первой половины (настройка оптимизатора), а вторая половина не так сложна, так что вы должны быть хороши, чтобы развернуть свою собственную сейчас.

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