Wie baue ich ein Polymer 2.x Projekt mit Polymer CLI?

Question

Kann mir jemand auf ein Tutorial hinweisen, das Polymer 2 und polymer-build von Polymer CLI verwendet? Wenn ich irgendein Beispiel in polymer-starter-kit benutze und polymer serve verwende, funktioniert es gut; aber wenn ich polymer build benutze und das Verzeichnis bundled oder unbundled verwalte, bekomme ich 404 Fehler. Ich habe sogar auf die neueste Alpha-Version von polymer-cli aktualisiert.

Auch mit https://github.com/tony19/generator-polymer-init-2-x-app Generatoren haben das gleiche Problem.

Answer 1

ich auch verlassen ein wenig Zeit damit verbracht, diese ein, um herauszufinden.Bitte verwenden Sie die

Plain polymer-cli scheint nicht die neuesten Build und Optimierungen zu Polymer 2.0 # Preview bezogenen Funktionalität zu unterstützen.

Sie können polymer-cli@next installieren. In Ubuntu können Sie einfach npm install -g polymer-cli@next

dann verwenden, würde die gebündelte und entbündelte Versionen der Anwendung, die durch polymer build erzeugt wird, einfach gut funktionieren.

Edit: Sie können meine Probe Polymer2.0 # Preview-Version des Codes bei https://github.com/phani1kumar/phani1kumar.github.io Zweig ist "DevMaster" finden.

Die sw-precache-config.js ist erste Render-Blockierung. Dadurch werden alle Ressourcen geladen, die die Hauptseite benötigt, um die App für die Offline-Nutzung verfügbar zu machen. src/lazy-resources.html lädt Ressourcen für die nächsten Routen.

Sie müssten eine ordnungsgemäße Konfiguration basierend auf Ihrem Layout und der Hauptseite in den folgenden 3 Dateien erhalten: sw-precache-config.js, polymer.json, src/lazy-resources.html. Dies ist eine Praxis in der Shop-App von Polymer-Team verfolgt, können Sie einen anderen Mechanismus für Lazy Loading wählen. Die unterste Zeile für das verzögerte Laden ist das Laden der Ressourcen nach Polymer.RenderStatus.afterNextRender.

Sie können auch die folgenden Artikel interessant finden: https://medium.com/@marcushellberg/how-i-sped-up-the-initial-render-of-my-polymer-app-by-86-eeff648a3dc0#.pi2iucwzi

Answer 2

bemerkte ich einen Fehler im Generator, dass die starter-kit Teilgenerator wurde eine Abhängigkeit von webcomponentsjs fehlt, die einen Fehler mit polymer-build verursachen würde. Und wie Sie entdeckt haben, fehlten polymer.json auch Abhängigkeiten für die Polyfill-Unterstützung von webcomponentsjs, die 404 auf Polyfilled-Browsern (wie Linux Chrome) verursacht. Das ist alles jetzt in v0.0.6 behoben.

Sie benötigen auch eine Version von polymer-build, die nicht versucht, das JavaScript uglify, das aufgrund seiner Unfähigkeit, ES6 zu erkennen, fehlschlagen würde. Der new-build-flags Zweig des polymer-cli Repos ersetzt uglify durch babili für ES6-Minification (hinzugefügt in). Sie könnten diesen Zweig auschecken und bauen es selbst, oder Sie können es von hier aus installieren:

npm i -g tony19-contrib/polymer-cli#dist-new-build-flags 

Der Einfachheit halber wird dieser Zweig als devDependency hinzugefügt, wenn die 2.0-Starter-Kit mit generator-polymer-init-2-x-app zu erzeugen.

---

zu bauen und ein Polymer 2.0 Starter Kit Projekt dienen:

1. ein 2.0 Starter Kit generieren (mit generator-polymer-init-2-x-app, v0.0.6 oder neuer) von 2-x-app - starter application template Auswahl:

   $ polymer init 
   ? Which starter template would you like to use? 
       ... 
       2-x-app - (2.0 preview) blank application template 
       2-x-app - (2.0 preview) blank element template 
   ❯ 2-x-app - (2.0 preview) starter application template 
   

2. Nachdem der Projektgenerator abgeschlossen ist, erstellen Sie das Projekt mit yarn build:

   $ yarn build 
   info: Deleting build/ directory... 
   info: Generating build/ directory... 
   info: Build complete! 
   

   Beachten Sie, dass der Ausgang nur build/, und nicht mehr build/bundled/ und build/unbundled/.

3. dienen, den Inhalt des Build-Verzeichnisses auf, und automatisch einen Browser öffnen:

   $ polymer serve build -o 
   

   Sie könnten dazu dienen, es auch mit einem anderen Werkzeug, um zu überprüfen, dass die Build-Ausgabe außerhalb des Kontexts arbeiten würde von irgendwelchen Polymerwerkzeugen. Starten Sie ein Python-Server in build/, und öffnen Sie manuell einen Browser, um es:

   $ cd build 
   $ python -m SimpleHTTPServer