Обязательные относительные пути

Я новичок в RequireJS. Я пишу несколько пользовательских привязок в Knockout.js и хочу разделить их с помощью модулей.

Схема моего кода на данный момент:

/
  default.html
  js
    code.js
    require-config.js 
    lib
      /require.js
      bridge
        bridge.js
        bindings1.js
        bindings2.js
        bindings3.js

Я хочу загрузить bridge.js из default.html и загрузить эту загрузку во все файлы привязок. Я пробовал загрузить bridge.js с помощью встроенного js с помощью функции require.

Мой запрос-config очень прост:

require.config({
    baseUrl: '/'
});

В bridge.js у меня возникают проблемы с загрузкой файлов с использованием относительного пути. Я пробовал:

require(['./bindings1', './bindings2', './bindings3'], function () {
    console.log('loaded');
});

Но это просто заканчивается тем, что используется, например, путь baseUrl + 'bindings1.js'. Я пробовал различные итерации в bridge.js. Единственный успех у меня был, если я напишу весь путь:

require(['js/bridge/bindings1', 'js/bridge/bindings2', 'js/bridge/bindings3'], function () {
    console.log('loaded');
});

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

Спасибо

Ответ 1

Относительные идентификаторы разрешаются относительно идентификатора модуля, в котором разрешен идентификатор. См. раздел AMD module id format.

Существует два способа привязать относительный идентификатор зависимостей к правильному контексту/области:

Определить вызов

Определить вызов - это начало/определение модуля. Все зависимости, запрашиваемые в вызове define(), ограничены в пределах/относительно этого идентификатора модуля. Пример:

// does not matter what the file name is.
define(
    'hand/named/module'
    , ['./child']
    , factoryFunction
)

или

// inside of 'hand/named/module.js' file.
define(
    ['./child']
    , factoryFunction
)

В обоих указанных случаях ./child разрешен в отношении идентификатора модуля, определенного вызовом define(). Идентификатор модуля в обоих случаях равен hand/named/module, а ./child разрешен hand/named/child (+ '.js', очевидно, когда приходит время его получить)

"Сфера применения" требует

Вы можете изменить область вызова require с глобальной на локальную, переопределив ее. На самом деле вам не нужно переопределять/сохранять имя require, это означает, что он изменяет. Требуемая функциональность становится "локальной" для определенного модуля.

// inside 'hand/named/module.js' file
define(
    ['require']
    , function(myLocalRequire){
        require('./child', function(){
            // outcome A
        })
        myLocalRequire('./child', function(){
            // outcome B
        })
    }
)

В результате A вы продолжаете использовать "глобальный" запрос - тот, который привязан к родительской области. Ваш ./child разрешает baseURL + '/child'

Результат B локально ограничен, привязан к id модуля hand/named/module, поэтому ./child разрешено hand/named/child

Рекомендуем @CristiPufu переопределить глобальную переменную require с локальным объектом, который будет локальным только для области действия этой функции:

// inside 'hand/named/module.js' file
define(
    ['require']
    , function(require){
        return function(){
            // here we have access only to "local" require,
            // since in the function declaration you decided to
            // override the 'require' variable with new object.
            // All code outside of this function will use global require.
            require('./child', function(){
                // outcome B
            })
        }
    }
)

Мое предпочтение заключается в размещении всех относительных ресурсов внутри вызова define. Делает их ясными и более заметными, поскольку они ясно показывают, к чему они относятся.

Ответ 2

Используйте "пакеты" в require config. Здесь действительный ответ для вас вопрос тема

require.config({
packages: [
{ 
    name: 'packagename',
    location: 'path/to/your/package/root',  // default 'packagename'
    main: 'scriptfileToLoad'                // default 'main' 
}]
   ... some other stuff ...
});

Внутри пакета вы сможете использовать относительные пути.