web-dev-qa-db-fra.com

Polymer élément avec dépendances javascript

J'ai créé n élément Polymer pour le rendu de Markdown qui utilise la bibliothèque marquée.js. Je me demandais, quelle est la méthode recommandée pour charger dans ses dépendances?

Dois-je simplement utiliser une balise de script?

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

Ou serait-il préférable de mettre toutes mes dépendances dans une importation html et de créer un lien vers ce fichier. Dans ce cas, je n'ai qu'une seule dépendance mais je pourrais facilement en avoir plus.

<!-- 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">

Remarque: Ces chemins supposent que mon élément (et ses dépendances) sont installés avec bower donc ils devraient tous être frères et sœurs dans bower_components.

polymer
51
robdodson

Les ressources privées doivent être installées dans votre dossier de composants et utilisées directement. Mais les ressources partagées, ces ressources que d'autres composants peuvent également utiliser (comme marked), doivent être traitées comme des dépendances.

Nous suggérons deux conventions pour gérer les dépendances partagées:

  1. utilisez toujours le chemin canonique qui est ../<package-name> (vous l'avez déjà fait). Polymer par convention attend un dossier de dépendance plate (tel que pris en charge par Bower), donc toute ressource dont vous avez besoin doit toujours être sur ce chemin.
  2. se référer à un import pour la ressource partagée.

Dans ce cas,

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

rencontre la première convention. Votre composant peut dépendre du package marked et s'attendre à ce qu'il existe à ../.

La deuxième convention prend en charge le partage. Si plusieurs composants d'un projet utilisent une balise script pour charger une bibliothèque, la bibliothèque se chargera plusieurs fois. Les importations, en revanche, sont dédoublonnées, vous n'avez donc pas ce problème.

Par exemple, si tous les composants chargent marked de la manière standard:

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

vous n'aurez alors qu'une seule copie du script chargée.

De plus, les importations vous permettent d'indirecter la ressource réelle. Par exemple, normalement marked-import Dépend de marked et utilise une balise script pour charger le JavaScript. Mais en fait, tout auteur de projet particulier peut modifier le marked-import.html Local pour charger le code principal à partir d'un CDN ou de tout autre emplacement. En indirectant tous les accès via l'importation, nous créons un point de contrôle unique.

Aujourd'hui, marked et d'autres bibliothèques n'incluent pas de fichiers d'importation, nous devons donc combler ces lacunes. En outre, cela nécessitera une coordination avec d'autres composants (pour avoir un accord sur le nom d'importation standard pour une ressource partagée particulière). À mesure que (et si) ces conventions sont adoptées, ces questions diminueront avec le temps.

Ainsi, votre composant installé ressemblerait à ceci:

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