web-dev-qa-db-ja.com

Polymer javascript依存関係を持つ要素

私は、marked.jsライブラリを使用する a Polymer markdownをレンダリングするための要素 を作成しました。依存関係を読み込む推奨方法は何ですか

スクリプトタグを使用するだけですか？

<script src="../marked/lib/marked.js"></script>

または、すべての依存関係をhtmlインポートに入れ、その1つのファイルにリンクする方が良いでしょう。この場合、依存関係は1つしかありませんが、簡単に依存関係を増やすことができます。

<!-- in scripts.html -->
<script src="../marked/lib/marked.js"></script>
<script src="../foo/foo.js"></script>
<script src="../bar/bar.js"></script>

<!-- in mark-down.html -->
<link rel="import" href="scripts.html">

注：これらのパスは、私の要素（およびその依存関係）がbowerでインストールされていることを前提としているため、すべてbower_componentsの兄弟である必要があります。

polymer
51
robdodson

プライベートリソースはコンポーネントフォルダにインストールし、直接使用する必要があります。しかし、sharedリソース、他のコンポーネントも使用したいリソース（markedなど）は、依存関係として処理する必要があります。

共有依存関係を処理するための2つの規則を提案します。

  1. 常にcanonical pathを使用します。これは../<package-name>です（すでにこれを行っています）。 PolymerはBowerがサポートするフラットな依存フォルダーを想定しているため、必要なリソースは常にこのパス上になければなりません。
  2. 共有リソースについてはimportを参照してください。

この場合、

<script src="../marked/lib/marked.js">

最初のコンベンションを満たしています。コンポーネントはmarkedパッケージに依存し、../に存在することを期待できます。

2番目の規則は共有をサポートしています。プロジェクト内の複数のコンポーネントがscriptタグを使用してライブラリをロードする場合、ライブラリは複数回ロードされます。一方、インポートは重複排除されているため、この問題は発生しません。

たとえば、すべてのコンポーネントがmarkedを標準的な方法でロードする場合：

<link rel="import" href="../marked-import/marked-import.html">

その場合、スクリプトのコピーは1つしかロードされません。

さらに、インポートにより、実際のリソースを間接的に使用できます。たとえば、通常marked-importはmarkedに依存し、scriptタグを使用してJavaScriptをロードします。しかし実際、特定のプロジェクト作成者はローカルmarked-import.htmlを変更して、CDNまたは他の場所からメインコードをロードできます。インポートを介してすべてのアクセスを間接化することにより、単一の制御点を作成します。

現在、markedおよびその他のライブラリにはインポートファイルが含まれていないため、これらのギャップを埋める必要があります。さらに、他のコンポーネントとの調整が必要になります（特定の共有リソースの標準的なインポート名について合意するため）。これらの規則が採用されている場合（およびその場合）、そのような質問は時間が経つにつれて少なくなります。

したがって、インストールされたコンポーネントは次のようになります。

/components
  /mark-down - depends on marked-import
  /marked-import - (controlled by user, can just depend on `../marked`)
  /marked
51
Scott Miles