試圖瞭解pathMappings

我有一個聚合物項目，我用的試圖瞭解pathMappings

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

（部分）結構上工作的編碼時我的-element.html，我想它的HTML進口引用形式的URL ../polymer/polymer.html。這意味着我需要將app/elements和bower_components映射到相同的url（如果它們存在，優先轉到app/elements，否則它應該回退到在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;

但只要我跑一飲而盡測試：本地運行它們我收到了一大堆404s的怪異網址，它們是這樣的

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。

我在做什麼錯，我該怎麼做？

來源

2015-12-04 akc42

我現在已經找到了答案。有兩種可能的方法，但首先讓我解釋一下我發現的有關pathMappings的內容。

首先，雖然它們是從url到文件偏移量的映射數組，但它不是一個簡單的數組。每個數組元素實際上都是一個對象，我有許多鍵，每個鍵都是可能的url前綴，並且該鍵的每個值都是相對於該鍵表示的項目根的路徑。 Web組件測試儀使用稱爲serve-waterfall的節點模塊，其實際上定義它自己的條目數，具體爲： -

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

在配置階段，需要提供任何陣列經由在WCT-conf.js一個模塊的出口（與您可以在您的主目錄或項目根目錄或兩者中找到此文件）與上述列表進行合併，同一數組索引中的對象將使用您提供的密鑰進行擴充。

最後，Web組件測試儀增加了自己的道路： -

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

其中WCT_ROOT就是WCT位於您node_modules目錄雖然這被推入末的陣列。這確保了摩卡，柴和sin能夠進行測試。

一旦pathMappings已建成，它們被展平爲「瀑布」陣列，因此，在陣列的每個索引每個鍵變得與兩個鍵，prefix和target一個對象，這個瀑布陣列是重要的，因爲它的有序。因此，如何將各種路徑漫遊的來源合併在一起也是重要的，這可能比判斷更爲幸運。

Web組件測試啓動一個Express Web服務器，並且服務器根位於項目根目錄。

當Web服務器正在運行時，並且當有一個web組件測試器負責單獨管理的url（例如web runner組件）時，這由app.get（）調用提供。如果它沒有被捕獲，那麼服務器瀑布組件作爲中間件踢，使用app.use（）。以一種相當複雜的方式，這步驟通過「瀑布」陣列嘗試每個匹配的前綴，並基於Express服務器根目錄和您嘗試檢索的目標文件構建一個基於URL的文件。如果此嘗試生成「404」錯誤，則會捕獲該錯誤，並嘗試下一個匹配的瀑布陣列條目。

好的，這麼多的背景，現在的解決方案。如果您想要做一些複雜的事情，您可以在wct-conf.js文件中定義一個registerHook函數，並在其中完全重新定義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

再次WCT變成了/components/<basename>/app/elements/polymer/polymer.html要求這一點，但這種失敗，所以在瀑布數組的下一個項目進行檢查。唯一匹配的是前綴/components/<basename>/app/elements，這變成了/components/<basename>/bower_components/polymer/polymer.html的請求。它的工作原理。

用我提供的，你也可以映射其他方式配置，瀑布數組中的第一個項目會失敗/components/<basename>/bower_components/xxx/xxx.html之後，唯一的匹配前綴是/components/<basename>/app/elements之一。我實際上看不到這一個需要。

來源

2015-12-05 17:54:54 akc42

試圖瞭解pathMappings

回答

相關問題