Полимерный элемент с зависимостями javascript

Я создал элемент Polymer для рендеринга уценки, который использует библиотеку с отметкой .js. Мне было интересно, какой рекомендуемый способ загрузки в зависимостях?

Должен ли я использовать тег script?

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

Или было бы лучше включить все мои зависимости в импорт html и ссылку на этот файл. В этом случае у меня есть только одна зависимость, но я мог бы легко получить больше.

<!-- 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_components.

Ответы

Ответ 1

Частные ресурсы должны быть установлены в вашей папке компонента и использоваться напрямую. Но общие ресурсы, те ресурсы, которые другие компоненты, которые я также хочу использовать (например, marked), должны обрабатываться как зависимости.

Мы предлагаем два соглашения для обработки общих зависимостей:

  • всегда используйте канонический путь, который ../<package-name> (вы уже это сделали). Полимер по соглашению ожидает папку с плоской зависимостью (поддерживаемая Bower), поэтому любой ресурс, который вам нужен, всегда должен быть на этом пути.
  • ссылаются на импорт для общего ресурса.

В этом случае

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

соответствует первому соглашению. Ваш компонент может зависеть от пакета marked и ожидать, что он будет существовать в ../.

Второе соглашение поддерживает совместное использование. Если более одного компонента в проекте использует тег script для загрузки библиотеки, библиотека будет загружаться несколько раз. Импорт, с другой стороны, дедуплицируется, поэтому у вас нет этой проблемы.

Например, если все компоненты загружают marked стандартный способ:

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

тогда вы будете иметь только одну копию загруженного script.

Кроме того, импорт позволяет косвенным образом использовать фактический ресурс. Например, обычно 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