Как создать проект Polymer 2.x с помощью Polymer CLI?

Я также потратил немного времени, чтобы понять это. Пожалуйста, используйте polymer-cli@next вместо polymer-cli

Plain polymer-cli, похоже, не имеет последней сборки и оптимизации для поддержки функций, связанных с Polymer 2.0#Preview.

Вы можете установить polymer-cli@next. В Ubuntu вы можете просто использовать npm install -g polymer-cli@next

После этого объединенная и несвязанная версии приложения, сгенерированные с помощью polymer build, будут работать нормально.

Изменить: образец кода Polymer2.0#Preview можно найти по адресу https://github.com/phani1kumar/phani1kumar.github.io — ветка «devmaster».

sw-precache-config.js - начальная блокировка рендеринга. Это загрузит все ресурсы, необходимые главной странице, чтобы сделать приложение доступным для автономного использования. src/lazy-resources.html загружает ресурсы для следующих маршрутов.

Вам нужно будет получить правильную конфигурацию на основе вашего макета и главной страницы в следующих 3 файлах: sw-precache-config.js, polymer.json, src/lazy-resources.html. Это практика, которой придерживаются в приложении магазина от команды Polymer, вы можете выбрать другой механизм отложенной загрузки. Суть ленивой загрузки заключается в том, чтобы загружать ресурсы после Polymer.RenderStatus.afterNextRender.

Вам также может быть интересна следующая статья: https://medium.com/@marcushellberg/how-i-sped-up-the-initial-render-of-my-polymer-app-by-86.-eeff648a3dc0#.pi2iucwzi

Я заметил ошибку в генераторе, заключающуюся в том, что в подгенераторе starter-kit отсутствовала зависимость от webcomponentsjs, что вызывало ошибку с polymer-build. И, как вы обнаружили, в polymer.json также отсутствовали зависимости для поддержки полифилла webcomponentsjs, что вызывало ошибку 404 в браузерах с полифиллом (таких как Linux Chrome). Теперь все это исправлено в v0.0.6.

Вам также понадобится версия polymer-build, которая не пытается uglify использовать JavaScript, что может привести к сбою из-за неспособности распознать ES6. Ветвь new-build-flags репозитория polymer-cli заменяет uglify на babili для минификации ES6 (добавлено в PR#525). Вы можете проверить эту ветку и собрать ее самостоятельно, или вы можете установить ее отсюда:

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

Для удобства эта ветвь добавляется как devDependency при создании стартового комплекта 2.0 с generator-polymer-init-2-x-app.

Чтобы построить и обслуживать проект Polymer 2.0 Starter Kit:

1. Создайте Starter Kit 2.0 (используя generator-polymer-init-2-x-app, v0.0.6 или новее), выбрав 2-x-app - starter application template:

   $ 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. После завершения работы генератора проекта соберите проект с помощью yarn build:

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

   Обратите внимание, что на выходе только build/, а не build/bundled/ и build/unbundled/.

3. Отправьте содержимое каталога сборки и автоматически откройте его в браузере:

   $ polymer serve build -o
   

   Вы также можете использовать его с другим инструментом, чтобы убедиться, что выходные данные сборки будут работать вне контекста любых инструментов Polymer. Запустите сервер Python в build/ и вручную откройте для него браузер:

   $ cd build
   $ python -m SimpleHTTPServer