Относительные пути с модулями/пакетами requirejs
-
25-10-2019 - |
Вопрос
Я довольно новичок в «Требованиях», и я столкнулся с некоторой проблемой. Я написал небольшую структуру, основанную на основе с использованием requirejs, и я хочу, чтобы она была повторно использования в разных проектах. Итак, с некоторыми поисками, которые я изучал, который требует, позволяет пакетам. Это казалось тем, что я искал. У меня есть файл main.js, чтобы запустить мое приложение, которое по сути выглядит так:
require.config({
packages: ['framework']
});
require(['framework'], function(framework) {
framework.createDash();
});
Затем в том же каталоге, что и мой main.js, у меня есть еще один каталог, который называется «Framework», который содержит другой Main.js, который выглядит так:
define(function(require, exports, module) {
exports.createDash = function(dash, element) {
require(['dash/dash.model', 'dash/dash.view'], function(DashModel, DashView) {
return new DashView({
model: new DashModel(dash),
el: element ? element : window
});
});
};
});
В поисках я нашел эта страница что указывает на то, что аргумент «требовать» должен быть поддержан подмодулям. Однако, когда я стараюсь требовать вещей, они все еще относится к моему первоначальному Main.js. Я пробовал несколько вещей и искал часами, но безрезультатно. Есть ли способ, которым я могу включить свои вызовы по требованию/определить в моем пакете по сравнению с Main.js в его корне?
Решение
Вам необходимо определить свой подмодуль в качестве пакета в конфигурации «Требуется:
require.config({
packages: [
{ name: 'packagename',
location: 'path/to/your/package/root', // default 'packagename'
main: 'scriptfileToLoad' // default 'main'
}]
... some other stuff ...
});
Чтобы загрузить ваш модуль, вам просто нужно использовать ваше «packageName» в соответствии с требованиями:
define(['jquery', 'packagename'], function($, MyPackage) {
MyPackage.useIt()
});
В вашем пакете вы должны использовать ./
Префикс для загрузки ваших файлов относительно вашего подмодуля:
define(['globalDependency', './myLocalFile'], function(Asdf, LocalFile) {
LocalFile.finallyLoaded();
});
Есть полезный ярлык: если имя вашего пакета равна вашему местоположению, а ваш основной файл называется «main.js», то вы можете заменить это
packages: [
{ name: 'packagename',
location: 'packagename',
main: 'main'
}]
к этому:
packages: ['packagename']
Насколько я вижу, вы уже пытались определить пакет, но вы также использовали префикс ./? Без этого префикса требуется попытаться найти файлы в его глобальном корневом пути. И без пакета, ./
будет бесполезен, потому что относительный путь такой же, как глобальный корень.
Ваше здоровье
Другие советы
Я выяснил ответ на свой вопрос и решение (по -видимому, они были не такими же). Думаю, я опубликую это здесь на случай, если это поможет кому -то еще в будущем.
По сути, я хотел загрузить свою структуру в его собственном контексте. Я нашел вариант контекста в рамках Раздел конфигурации на веб -сайте требований и Пример того, как его использовать. Анкет Первоначально я попробовал это, делая что -то вроде:
var req = require.config({
baseUrl: 'framework',
context: 'framework',
paths: {
jQuery: 'lib/jquery/jquery-1.7.min.js',
Underscore: 'lib/underscore/underscore.min.js',
Backbone: 'lib/backbone/backbone.min.js',
etc...
}
});
req(['main'], function() {});
Было две проблемы с этим. Во -первых, моя переменная «REQ» определялась вне рамки, но я хотел, чтобы структура определила свои собственные пути. И во -вторых, всякий раз, когда файл за пределами структуры потребует файла в рамках, который, в свою очередь, потребует «jQuery», тогда JQUERY (или что -то еще) не потребуется из контекста экземпляра Framework требуется и поэтому он не мог найти файл.
То, что я закончил сделать, это определение Main's Main's Master's Main.js, чтобы выглядеть примерно так:
var paths = {
jQuery: 'lib/jquery/jquery-1.7.min.js',
Underscore: 'lib/underscore/underscore.min.js',
Backbone: 'lib/backbone/backbone.min.js',
etc...
};
define(function() {
var exports = {};
exports.initialize = function(baseUrl, overridePaths, callback) {
if(!overridePaths) {
overridePaths = {};
}
if(baseUrl && baseUrl[baseUrl.length - 1] != '/') {
baseUrl = baseUrl + '/';
}
var fullpaths = {};
for(var path in paths) {
// Don't add baseUrl to anything that looks like a full URL like 'http://...' or anything that begins with a forward slash
if(paths[path].match(/^(?:.*:\/\/|\/)/)) {
fullpaths[path] = paths[path];
}
else {
fullpaths[path] = baseUrl + paths[path];
}
}
var config = {paths: fullpaths};
for(var pathName in overridePaths) {
config.paths[pathName] = overridePaths[pathName];
}
require.config(config);
// Do anything else you need to do such as defining more functions for exports
if(callback) {
callback();
}
}
return exports;
});
А потом в файле моего проекта Main.js я просто делаю это:
require(['framework/main'], function(framework) {
// NOTE: This setTimeout() call is used because, for whatever reason, if you make
// a 'require' call in here or in the framework without it, it will just hang
// and never actually go fetch the files in the browser. There's probably a
// better way to handle this, but I don't know what it is.
setTimeout(function() {
framework.initialize('framework', null, function() {
// Do stuff here
}
}, 0);
});
Это берет все, что передается в метод Framework's Inityaze () для «BaseUrl», и подготавливает его к любым путям, которые определяет структуру, которые не начинаются с прямой черты или «что -либо: //», если они не являются переопределениями. Это позволяет пакету, используя фреймворк, чтобы переопределить такие вещи, как «jQuery».
Это сработало для меня, добавив "./"
Префикс к названиям модулей:
define(function (require, exports, module) {
exports.createDash = function (dash, element) {
require([ './dash/dash.model', './dash/dash.view' ], function (DashModel, DashView) {
return new DashView({
model : new DashModel(dash),
el : element ? element : window
});
});
};
});
Процесс, который хорошо работал для меня для того, чтобы позволить пакету с подмодулями непосредственно из-за данных или из внешней структуры, предполагая, что Main.js (или другой пакет Main) называется определенным именем, должен был использовать var baseUrl = require.toUrl('packageName') + '/../'
как префикс к require.config({ paths: { ... } })
конфигурационный файл. Например:
var music21Base = require.toUrl('music21') + '/../';
require.config({ paths: {
'jquery': music21Base + 'ext/jquery/jquery.2.1.10.min';
'subModuleLoader': music21Base + 'src/subModuleLoader';
} });
Настройка context: "xxx"
работал нормально для вызова нормальных модулей с ./modName
но не работал на paths
аргумент для меня.