tl;dr
- Я создал генератор Polymer CLI для своих проектов на основе своих требований.
- Сгенерированный модифицированный стартовый комплект Polymer готов к шаблону PRPL, готов к работе в автономном режиме и использует механизм маршрутизации, вдохновленный маршрутизатором Surma и Пола Льюиса для разработчиков Chrome. Сайт саммита.
- Вы можете установить и использовать его для своих собственных проектов, выполнив следующие действия:
npm install -g polymer-cli npm install -g generator-polymer-init-qairoe-starter-kit cd new-project polymer-cli qairoe-starter-kit
Введение
Итак, я начал создавать свой генератор Polymer CLI. В основном он был вдохновлен выпуском Роба Додсона о Polymer CLI Generator.
На самом деле, я уже построил его для проекта, над которым работаю, так что я немного лучше знаком с процессом. Но поскольку этот интерфейс командной строки предназначен для определенного набора проектов с определенным набором предположений, я хотел иметь более общий подход для своих собственных проектов.
Мои собственные требования к генератору Polymer CLI
Я не хочу иметь еще один генератор полимерного стартового комплекта. У меня есть набор требований к моему проекту, который отличается от исходного стартового набора. Вот список:
- Должна быть возможность взять название проекта и описание проекта и поместить их в необходимые части файлов в системе.
- Следует создать максимально плоскую файловую систему.
- Следует создать общий, но обновляемый заголовок и пользовательские элементы ящика.
- Следует использовать
qairoe-app-layoutиqairoe-app-routerдля маршрутизации и компоновки. - Должна быть возможность использовать SASS и автоматически создавать общие таблицы стилей для пользовательских элементов.
- Следует создать процесс сборки/компилятора, который будет компилировать ES6 с использованием Babel и убирать все для повышения производительности.
Построенный шаблон из генератора должен иметь следующее:
- Должен иметь минимальный размер оболочки приложения с минимальной зависимостью от критического пути.
- Должен иметь шаблон PRPL.
- Должен иметь опыт работы в автономном режиме с использованием сервис-воркера.
Учитывая эти вещи… давайте начнем.
Ввод уникального имени проекта и описания
Для этого скопируем обычные находки, которые нам потребуются, из стартового набора Polymer.
Итак, у нас есть обычные файлы, за исключением того, что я изменил некоторые из них. Файлы с подчеркиванием есть, чтобы не копировать сразу и я могу с ними что-то сделать (типа переименовать). Я также не стал включать обычные страницы и создал их внутри папки src и подготовил большинство файлов, чтобы иметь возможность принимать переменные, поступающие из подсказок вопросов генератора.
Плоская структура
Теперь, чтобы сделать его как можно более плоским, я создал две новые папки для хранения страниц и пользовательских компонентов.
Папка pages содержит все пользовательские элементы страницы для проекта.
В то время как страница веб-компонентов ведет себя так же, как bower_components, но содержит пользовательские элементы, созданные для проекта.
Причина создания страниц заключается в будущей идее, которая у меня есть для анализа просматриваемого элемента страницы и рендеринга его с сервера для прогрессивного улучшения (если я смогу проанализировать файл и создать из него простую страницу…).
Добавление пользовательского заголовка и ящика
Глядя на файлы внутри веб-компонентов, я поместил как часть шаблона заголовок и ящик.
Я также создал _project-icons, чтобы разместить все значки, которые нужны только проекту. Это связано с тем, что загрузка обычного набора железных иконок из Каталога полимерных элементов оказала бы существенное влияние на производительность из-за неиспользуемых иконок.
Примечание. Вы можете создать свой набор необходимых иконок, перейдя в Генератор полимерных иконок.
Теперь все включенные пользовательские элементы зависят от app-layout, iron-selector, paper-icon-button, iron-icon и iron-icon-svg. Итак, давайте поместим это в bower.json.
Добавление макета приложения Qairoe и маршрутизатора приложений
Говоря о зависимостях, я хочу поместить свой макет приложения и маршрутизатор приложений в качестве зависимостей. Так…
После этого мы формируем оболочку приложения, чтобы включить qairoe-app-layout и qairoe-app-router, следуя соответствующей документации о том, как их использовать.
Компилятор SASS для создания общих стилей
Для этого я создал gulpfile.js
В настоящее время он зависит от файла с именем inject-sass.js, поэтому давайте создадим его.
Я получил файл из репозитория полимеров-sass superjose. Я изменил его, чтобы создать css с общим стилем, а не вводить его непосредственно в файл, чтобы, по крайней мере, не возникало конфликтов слияния, когда один человек работает над настраиваемым элементом, а другой работает над файлом sass для настраиваемого элемента. элемент.
Учитывая, что эти файлы зависят от модуля npm, мы должны создать файл npm package.json.
Строитель/Компилятор/Вулканизатор
Если вы заметили, я добавил в devDependencies намного больше, чем нужно. Другие модули используются для вулканизации/создания готового приложения для развертывания. Большинство задействованных задач — прямая копия образца заказной сборки, сделанного Polymer.
И поэтому мы обновляем gulpfile.js, чтобы включить все дополнительные задачи в поле.
Глядя на сборщик, исходные файлы, которые будут включены во фрагменты и оболочку, будут иметь свой javascript, сначала транспилированный в babel (потому что я буду использовать ES6), затем uglified, в то время как css минимизирован, а html будет минимизирован ( вместе со встроенными стилями и javascript).
Это также делается для зависимостей Bower, за исключением всех файлов в firebase и web-animations. Они оба не подходят для транспиляции в babel. Так что я должен удалить их и просто уродовать их.
Теперь, если мы вернемся к package.json, мы увидим, что gulp использует версию 4.0, а не обычную gulp 3.9. Это потому, что в gulp 3.9 нет gulp.series. Это означает, что установка gulp в глобальном масштабе не будет работать.
Чтобы проект использовал gulp 4.0, установленный локально в проекте, я добавил скрипт в package.json
И это сделано!
Настройка генератора
Возвращаемся к index.js генератора
Что нам нужно сделать, так это спросить, каково название проекта, описание проекта, краткое название проекта и автор проекта. Он также автоматически генерирует имя проекта из имени проекта.
Теперь о копировании шаблона котла в проект. Добавим это…
И мы закончили!
Первый раунд тестирования (скрестив пальцы)
Мы запускаем это для локального тестирования
npm link
Затем мы идем в другую папку и запускаем это
mkdir qairoe-starter-kit cd qairoe-starter-kit polymer init qairoe-starter-kit
Спустя тысячелетия (на самом деле именно Бабель держит инсталляцию… вздох…). Это производит это:
Теперь давайте проверим это…
polymer serve
Посмотрим, насколько большой и сколько времени потребуется, чтобы его построить…
Согласно инструментам разработки, наша сборка содержит 54 запроса с максимальным переданным объемом 557 КБ.
Примерно через 2 секунды загрузилась оболочка приложения и загружается все остальное. И почти за 3 секунды загружается полностью.
Теперь попробуем его построить.
npm run gulp #this is because we need to use gulp 4.0
а потом после бега...
Он больше… 607 КБ. Но это потому, что файлы перезагружались снова (видите, что 2-я строка (little-qairoes-project-app-shell.html) и 2-я до последней строки (little-qairoes-project-app-shell.html?sw-pre… ) то же самое в КБ.
так что тогда CTRL+SHIFT+R (чтобы не использовать сервис-воркер)
Передано до 283 КБ… и когда сервис-воркер отправляется в путь…
0 байт… готов к работе в автономном режиме.
Эй!!!
Вывод
Теперь, когда у меня есть генератор, я могу с легкостью приступить к созданию своих проектов (вместо того, чтобы копировать и вставлять его). Вы можете найти сгенерированное приложение Polymer здесь:
Вы также можете увидеть демонстрацию связанной версии с использованием service-worker здесь:
Вы также можете найти полимерный генератор qairoe-starter-kit здесь
Вы можете установить его через npm
npm install -g polymer-cli npm install -g generator-polymer-init-qairoe-starter-kit
Затем создайте шаблон с помощью этой команды в папке вашего проекта.
polymer-cli qairoe-starter-kit
Ну, думаю, все…
Если у вас есть какие-либо вопросы или разъяснения, или если я что-то пропустил или что-то еще… пожалуйста, не стесняйтесь оставлять комментарии.
