Require.js ładuje wszystkie zasoby dla aplikacji, w tym Polymer

Question

Buduję strukturę aplikacji dla dużego, wielofunkcyjnego projektu deweloperskiego. Jestem przekonany, że używam razem Require.js i Angular, aby zarządzać zależnościami i ładowaniem klas. Ale teraz chcę również użyć polimeru, ponieważ jest niesamowicie cool.

W jaki sposób mogę użyć require.js do załadowania bibliotek elementów polimerowych tak samo jak moje js? Podoba mi się pomysł, aby stać się jedynym prawdziwym sposobem na załadowanie wszystkich zasobów moich aplikacji. Widzę, jak przyjemnie jest móc połączyć szablon, skrypt i styl w jeden logiczny plik .html, który reprezentuje komponent, i wiem, że możemy podzielić te części na osobne pliki, ale jak tylko zobaczę jakikolwiek link = "importuj" rzeczy w środku, co wydaje mi się, że wchodzę w dziedzinę require.js.

Pomysły?

Answer 1

Występuje pewne napięcie między nimi, ponieważ oba chcą być systemem zapisu dla zależności śledzenia. Na przykład, jeśli robisz import http z /components/core-ajax/core-ajax.html, zawiera on import http z ../polymer/polymer.html, upewniając się, że polimer został załadowany przed uruchomieniem dowolnego skryptu dla core-ajax. Polymer ma również narzędzie o nazwie wulkanizować, które służy do kompilowania zestawu komponentów sieciowych w jeden plik w celu zmniejszenia liczby żądań HTTP w produkcji.

Brzmi znajomo? require.js ma analogiczny mechanizm dla wszystkich tych elementów. Warto również zauważyć, że nie jestem świadomy tego, co się robi, aby zunifikować to wszystko, i aby sprawić, że będzie bardziej skomplikowana, istnieje propozycja modułów ES6, która zbiera parę.

Moja rekomendacja na ten moment polega na wybraniu dokładnie jednego narzędzia do śledzenia zależności, jeśli to możliwe. Sugeruję użycie importu HTML, jeśli korzystasz z komponentów internetowych, ponieważ stosunkowo łatwiej jest przekonwertować moduł requirejs na prosty komponent sieciowy, niż na odwrót.

np. załóżmy, że masz skrypt jquery.datatables.js, który zależy od jquery. Layout plików jak:

• komponentów
  • jquery.datatables
    • jquery.datatables.js
    • jquery.datatables.html
  • jquery
    • jquery.js
    • jquery.html

jquery.html będzie zawierać:

<script src='jquery.js'></script> 

I jquery.datatables.html chcesz umieścić:

<link rel='import' href='../jquery/jquery.html'> 
<script src='jquery.datatables.js'></script> 

Imports HTML dba o duplikowanie, więc możesz być pewien, że jquery.html zostanie załadowany tylko raz.