2015-12-04 2 views
1

У меня есть проект Polymer я работаю с (частичной) структурыПытаясь понять pathMappings

app/ 
app/elements/my-element/my-element.html 
bower_components/ 

При кодировании мой-element.html, я хочу его HTML импорт ссылаться URLs вида ../polymer/polymer.html. Это подразумевает, что мне нужно сопоставить как app/elements, так и bower_components с одним и тем же URL-адресом (с приоритетом будет приложение/элементы, если они существуют, в противном случае он должен вернуться к поиску их в каталоге bower_components.

I пытался настроить мой wct-conf.js файл сделать это сделать. После того, как много играл с отладчиком, я попал в этот момент, который я думал бы это сделать,

var ret = { 
    'suites': ['app/elements/**/test'], 
    'plugins': ['local'], 
    'webserver': { 

    'pathMappings': [ 
     {'/components/<basename>/components': 'app/elements'}, 
     {'/components/<basename>/components': 'bower_components'}, 
     {'/components/<basename>/api': 'server/mock/fake.js'}, 
     {'/components/<basename>':'app'} 
    ] 
    } 
}; 

module.exports = ret; 

Но как только я запускаю тест глотка : local для их запуска. Я получаю загрузку странных URL-адресов, сообщающих 404. Они такие как

404 GET /components/pasv5/app/elements/bower_components/webcomponentsjs/webcomponents.min.js 
404 GET /components/pasv5/app/elements/bower_components/test-fixture/test-fixture-mocha.js 
404 GET /components/pasv5/app/elements/bower_components/test-fixture/test-fixture-mocha.js 

Что удалось слить app/elements и bower_components каким-то странным образом.

Что я делаю неправильно, и как мне это сделать?

ответ

1

Я нашел ответ. Есть два возможных способа, но сначала позвольте мне объяснить, что я обнаружил о pathMappings.

Во-первых, хотя они представляют собой массив отображений от url до смещения файлов, это не простой массив. Каждый элемент массива фактически является объектом, у которого у меня много ключей, и каждый ключ является возможным префиксом url, и каждое значение для этого ключа - это путь по отношению к корню проекта, который представляет этот ключ. Веб-тестер компонентов использует модуль узла под названием serve-waterfall, который фактически определяет несколько записей своих собственных, а именно: -

WEB_COMPONENT: [ 
    {'/components/<basename>': '.'}, 
    {'/components': 'bower_components'}, 
    {'/components': '..'}, 
    {'/': '.'}, 
    ], 

На стадии конфигурации, любой массив вы предоставляете через экспорт модуля в ДАП-conf.js (и вы можете найти этот файл либо в своем домашнем каталоге, либо в корне проекта, либо в обоих случаях) объединяется с приведенным выше списком, а объекты в том же индексе массива дополняются ключами, которые вы предоставляете.

Наконец, Web Component Tester добавляет путь свой: -

{'/components': path.join(WCT_ROOT, 'bower_components')}, 

где WCT_ROOT где ДАП находится в директории node_modules хотя это выталкивается в массив в конце. Это гарантирует, что мокка, чай и силон доступны для тестирования.

После pathMappings была построена, они сплющены в «водопаде» массив, так что каждый ключ в каждом индексе массива становится объектом с двумя ключами, prefix и target, и этот водопад массив имеет важное значение, потому что его заказали , Таким образом, также важно, как различные источники сопоставлений путей объединяются вместе, и это может быть больше удачи, чем суждения.

Тестирование веб-компонентов начинается с веб-сервера Express с корнем сервера, расположенным в корне проекта.

Когда веб-сервер запущен, а когда есть URL-адрес, для которого выполняется только тестер веб-компонента (например, компонент веб-бегуна), он обслуживается вызовом app.get(). Если его не поймать, то компонент сервировки-водопада будет использоваться в качестве промежуточного программного обеспечения, используя app.use().В довольно запутанном виде это проходит через массив «водопада», который пытается использовать каждый соответствующий префикс и составляет url, основанный на корневом сервере Express и целевом файле, который вы пытаетесь получить. Если эта попытка генерирует ошибку «404», она ее ловит и пытается выполнить следующую, соответствующую запись массива водопада.

ОК, так много для фона, теперь для решения. Если вы хотите сделать что-то сложное, вы можете определить функцию registerHook в файле wct-conf.js и в ней полностью переопределить pathMappings.

Что-то вроде следующего: -

var ret = { 
    'suites': ['app/elements/**/test'], 
    'plugins': ['local'], 
    'registerHooks' : function(context) { 
    var existingMapping = context.options.webserver.pathMappings; 
    var pathMappings = [ 
     {'/components/<basename>/bower_components': 'app/elements'}, 
     {'/components/<basename>/app/elements': 'bower_components'}, 
    ] 
    pathMappings = pathMappings.concat(existingMapping); 
    context.options.webserver.pathMappings = pathMappings; 
    } 

}; 

module.exports = ret; 

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

var ret = { 
    'suites': ['app/elements/**/test'], 
    'plugins': ['local'], 
    'webserver': { 
    'pathMappings': [ 
     {'/components/<basename>/bower_components': 'app/elements'}, 
     {'/components/<basename>/app/elements': 'bower_components'}, 
    ] 

    } 
}; 

module.exports = ret; 

А вот краткое объяснение что оно делает. Параметр suites определяет список файлов при поиске тестов, и запрашивается запрос на URL-адрес /components/<basename>/app/elements/xxx/test/xxx-test.html (или аналогичный). Это преуспевает от первого элемента массива водопада.

Нет сомнений, что тестовая жгут пытается импортировать ../xxx.html, и это делается в качестве запроса для /component/<basename>/app/elements/xxx.html и снова удаляется от первого элемента массива.

Далее элемент испытуемый будет пытаться импортировать HTML ..\polymer\polymer.html

Опять ДАП превращается это в запросе /components/<basename>/app/elements/polymer/polymer.html, но это не удается, и поэтому следующий элемент в массиве Waterfall проверяется. Единственный, который совпадает с префиксом /components/<basename>/app/elements, и который превращается в запрос /components/<basename>/bower_components/polymer/polymer.html. И это работает.

С предоставленной мной конфигурацией вы также можете сопоставить другой способ, первый элемент в массиве водопада потерпит неудачу для /components/<basename>/bower_components/xxx/xxx.html и единственный соответствующий префикс после этого - /components/<basename>/app/elements. На самом деле я не вижу этого.

Смежные вопросы