Если вы похожи на меня и любите разрабатывать приложения Ember, вам, вероятно, понравится Ember-CLI. Это один из лучших инструментов для сборки, который дает мне все необходимое для создания амбициозных одностраничных приложений. Но иногда вы не хотите создавать еще одно одностраничное приложение. Возможно, вы хотите как можно скорее представить статический контент, и у вас нет большой потребности в каком-либо динамическом поведении. На этом этапе вы можете начать создавать простой проект, используя Gulp, Grunt, Jekyll и т. Д.

Но было бы неплохо, если бы вы могли использовать для этого Ember-CLI? Он уже предлагает отличные решения для:

  • Создание шаблонов с помощью руля с помощью компонентов, выходов и помощников
  • CSS минификация
  • Сервер разработки с liveReload и горячей перезагрузкой стилей

После нескольких быстрых команд установки ember у вас могут быть надстройки для:

  • Предварительная обработка CSS - SASS, LESS, Autoprefixer
  • Сжатие изображения
  • Элементы пользовательского интерфейса (они могут вызвать проблемы, но об этом позже)

Кроме того, создание статического веб-сайта с использованием Ember-CLI дает вам еще одно большое преимущество. Если позже вы решите преобразовать сайт в одностраничное приложение, для этого практически не нужно работать… Если у вас нет большого количества контента в шаблонах, который приведет к чудовищно огромному JS-файлу, вам может потребоваться небольшая реструктуризация для загрузки контент из API :). Если вы просто хотите добавить немного динамического поведения здесь и там, вы можете использовать Ember Islands.

Генерация и сохранение HTML с помощью Ember-CLI

Хорошо, звучит неплохо, но разве Ember CLI не генерирует файлы JS вместо HTML? Да, но именно здесь Fastboot приходит на помощь.

Fastboot запускает ваше приложение Ember на сервере и отправляет уже проанализированный HTML-код в браузер. Запустить Fastboot так же просто, как:

ember install ember-cli-fastboot
ember fastboot --environment=production --serve-assets

Теперь у вас есть работающий сервер Fastboot. На этом этапе существует несколько способов создания статического HTML. Вы можете сделать это уже на сервере в настраиваемом экспресс-приложении, в которое вы можете включить Fastboot в качестве промежуточного программного обеспечения для экспресс-обработки. Вы можете создать собственный сценарий Node для очистки HTML. Но в моем случае я мог легко очистить сайт с помощью простого сценария оболочки:

rm -rf ./scrape-dist
mkdir scrape-dist
cd scrape-dist
cp -ar ../fastboot-dist/assets ./assets
cp -ar ../fastboot-dist/images ./images
base_url=”http://localhost:3000/"
app_name=”app”
scrape(){
 if test -n “$1”; then
 mkdir $1
 fi
 url=$base_url$1
 wget $url -O ./$1/index.html
grep -v “assets/vendor” ./$1/index.html > ./$1/temp_index.html
 mv ./$1/temp_index.html ./$1/index.html
echo ./$1/index.html
grep -v “assets/$app_name” ./$1/index.html > ./$1/temp_index.html
 mv ./$1/temp_index.html ./$1/index.html
}
scrape “”
scrape “cars”
scrape “buildings”
scrape “people”

Сохраните это в scrape.sh и запустите

sh scrape.sh

создаст папку ./scrape-dist и скопирует в нее ресурсы и изображения. Он будет запускать запросы на http: // localhost: 3000 /, / cars, / cabin, / people и помещать контент в. /index.html. /cars/index.html,. /buildings/index.html и ./people/index.html. Он также удалит файлы app.js и vendor.js из вывода. Папка scrape-dist готова к развертыванию на сервере.

Конечно, есть минусы. Fastboot по-прежнему является экспериментальной функцией. Многие надстройки по-прежнему не совместимы с Fastboot. А поскольку мы удаляем файлы ember .js, инструменты для сборки javascripts (транспиляция, конкатенация, минификация) отсутствуют, поэтому вам придется создавать собственные. На этом этапе вам понадобится ember-cli-head для поддержки настраиваемых метатегов.

Также можно было бы избежать Fastboot и очистить созданный на стороне клиента HTML с помощью PhantomJS, что может позволить вам использовать гораздо больше надстроек, которые используют didInsertElement () и JQuery. Но в моем случае использования Fastboot было достаточно и легко.

ОБНОВЛЕНИЕ: есть также аддон ember-cli-staticboot, который выполняет парсинг за вас

— — — — —

Я фрилансер-разработчик и ищу работу на ближайшие месяцы. Я специализируюсь на создании одностраничных приложений с использованием Ember.js и оптимизации производительности. Не стесняйтесь обращаться ко мне по адресу [email protected] или twitter.com/@martinmalinda.cz