1

私は（部分的な）構造で取り組んでいるPolymerプロジェクトを持っています

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

my-element.html をコーディングするとき、その html インポートで form の URL を参照するようにし../polymer/polymer.htmlます。これが意味することは、app/elements と bower_components の両方を同じ URL にマップする必要があるということです (存在する場合は app/elements が優先されます。存在しない場合は、bower_components ディレクトリで検索するようにフォールバックする必要があります)。

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;

しかし、それらを実行するために gulp test:local を実行するとすぐに、404 を報告する奇妙な URL が大量に表示されます。彼らはこのようなものです

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れ、奇妙な方法で。

私は何を間違っていますか、どうすればよいですか?

4

1 に答える 1

1

私は今答えを見つけました。2 つの方法が考えられますが、最初に、pathMappings について私が発見したことを説明させてください。

まず、URL からファイル オフセットへのマッピングの配列ですが、単純な配列ではありません。各配列要素は、実際には多くのキーを持つオブジェクトであり、各キーは可能な URL プレフィックスであり、そのキーの各値は、そのキーが表すプロジェクト ルートからの相対パスです。serve-waterfallWeb コンポーネント テスターは、実際には独自のいくつかのエントリを定義するというノード モジュールを使用します。具体的には次のとおりです。

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

構成段階で、wct-conf.js のモジュール エクスポートを介して提供する配列 (このファイルはホーム ディレクトリまたはプロジェクト ルート、またはその両方に配置できます) は、同じ配列内のオブジェクトを含む上記のリストとマージされます。指定したキーでインデックスが拡張されます。

最後に、Web Component Tester は独自のパスを追加します:-

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

ここで、WCT_ROOT は node_modules ディレクトリにある WCT の場所ですが、これは最後に配列にプッシュされます。これにより、テストのために mocha、chai、および sinon にアクセスできるようになります。

pathMappings が構築されると、それらは「ウォーターフォール」配列にフラット化されるため、配列の各インデックスの各キーは 2 つのキーを持つオブジェクトになりprefix、targetこのウォーターフォール配列は順序付けられているため重要です。したがって、pathMappings のさまざまなソースがどのようにマージされるかも重要であり、それは判断よりも運に左右される可能性があります。

Web コンポーネントのテストでは、サーバー ルートがプロジェクト ルートにある Express Web サーバーが開始されます。

Web サーバーが実行中で、web-component-tester だけが担当する URL (Web ランナー コンポーネントなど) がある場合、これは app.get() 呼び出しによって提供されます。これに引っかからない場合は、app.use() を使用して、serve-waterfall コンポーネントがミドルウェアとして作動します。かなり複雑な方法で、これは「ウォーターフォール」配列を介して一致する各プレフィックスを試行し、Express サーバーのルートと取得しようとしているターゲット ファイルに基づいてURLを作成します。この試行で "404" エラーが生成された場合は、それをキャッチして、次の一致するウォーターフォール配列エントリを試行します。

OK、背景についてはここまでにして、ソリューションについて説明します。 複雑なことをしたい場合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

再び 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-05T17:54:54.017 に答える