Сборки Snowpack и ES в последнее время становятся все более популярными, и мы также хотим оценить их, чтобы увидеть, как они могут улучшить производительность нашего приложения в нашей компании. Поскольку доступных руководств не так много, я решил покопаться в некоторых API-интерфейсах javascript Snowpack и собрать простое приложение, которое показывает список чемпионов League of Legends, щелкнув любое имя чемпиона в списке, вы перейдете к страницу с подробными сведениями об этом конкретном чемпионе. Если щелкнуть имя чемпиона на этой странице сведений, в браузере появится предупреждение. Звучит просто, правда?
Прочитав эту статью, вы сможете получить некоторое общее представление о:
- Как Snowpack использует dev-сервер и как он создает ваше приложение;
- Как рендеринг на стороне сервера работает с движком шаблонов представления;
- Зачем нужен Hydrate () и как он работает.
Теперь перейдем к деталям. (Это репо, если вам не терпится его проверить.)
Все начинается с server / index.js, сначала он вызывает createRoutes (), чтобы определить все маршруты, которые использует приложение, и каждый маршрут будет отображать соответствующее представление.
Можно рекурсивно читать все файлы из папки / page и динамически генерировать все маршруты, но я чувствую, что четкое определение всех маршрутов в createRoutes () требует меньше усилий и идеально соответствует моим потребностям.
Для '/ Champions /: id' в createRoutes.js вы можете заменить 'id' любым именем переменной, в основном это просто сообщает приложению, что это параметр, и его значение доступно как req.params, и оно будет передано для просмотра функции шаблонизатора, о которой будет сказано позже.
Теперь, когда мы смонтировали все маршруты в соответствующие им шаблоны представления, пора определить функцию механизма шаблонов, которая будет отвечать за рендеринг html-документа на стороне сервера.
app.engine («jsx», templateEngineFunc (devServer));
Указав, что это движок «jsx», мы можем опустить расширение файла, в противном случае вам нужно включить расширение для пути маршрута.
И, конечно же, если мы находимся в режиме разработки, нам нужно вызвать startServer (), чтобы запустить сервер Snowpack Dev. В противном случае он будет предполагать, что он находится в производственном режиме, и приложение будет использовать активы в папке / build.
После этого приложение просто установит папку просмотров и зарегистрирует механизм просмотра.
// указываем каталог просмотров
app.set («views», path.join (process.cwd (), «client», «pages»));
// регистрируем механизм шаблонов, теперь он сможет отображать файлы .jsx
app.set («механизм просмотра», «jsx»);
Теперь давайте посмотрим, как работает функция Template Engine, она принимает три аргумента: filePath, параметры и функцию обратного вызова. FilePath - это, очевидно, просто путь к соответствующему файлу шаблона представления, например, запрос URL-адреса «/ Champions / avilsfd» будет проходить «/ Champions / Champion / Index» (проверьте createRoutes.js), а options.id будет « avilsfd »(помните часть: id, которую мы обсуждали выше!).
Теперь, если мы находимся в режиме разработки, то есть сервер разработки Snowpack, он получит среду выполнения сервера разработки и будет использовать ее для импорта всех ресурсов из / client. В противном случае он находится в производстве и будет импортировать активы из папки / build.
Здесь стоит обратить внимание на pageImportPath. Он переходит в runtime. ImportModule () выдаст ошибку «файл не найден», но мне, наконец, удалось найти обходной путь, чтобы просто изменить расширение .jsx на .js (я предполагаю, что в нем есть что-то для делаем с extensionMap конфигурации снежного покрова):
const pageImportPath = getFilePath (filePath) .replace (/ \. jsx $ /, «.js»);
Также обратите внимание на getPropsForServer, это просто getProps (), импортированный из соответствующего компонента страницы (например, champion / index.jsx), нам нужно вызвать эту функцию на сервере, чтобы получить реквизиты для этой конкретной страницы, чтобы сервер мог отображать HTML на стороне сервера.
Нам также необходимо импортировать базовый файл html из /client/index.html, он похож на index.html обычного приложения responsejs.
htmlFile = readFileSync (path.join (path.resolve (), `/ build / index.html`),‘ utf8 ’);
Если вы хотите узнать больше о том, как работает снежный покров, ознакомьтесь с его документацией:
Теперь нам нужно будет создать сценарий для клиентской стороны, проверить createScript.js и просто создать следующий сценарий, который затем войдет в тег ‹script› на странице html.
Без этого скрипта отображаемая на стороне сервера страница не станет интерактивной после того, как она появится в вашем браузере (т. Е. Нажатие на имя чемпиона не приведет к отображению предупреждения). Вы можете попробовать не добавлять этот тег ‹script› или просто передать undefined props в createScript.js и посмотреть, что произойдет. Это поможет вам лучше понять, как работают hydrate () и SSR.
Теперь он использует renderToString () для рендеринга компонента страницы и вставляет его в качестве дочерних элементов в htmlFile вместе со скриптом для создания окончательной разметки и затем возвращает обратный вызов.
Наконец, мы вернулись к части res.render () в createRoutes:
res.render (‘Champions / Champion / Index’, req.params);
Сервер отправит HTML-документ в ваш браузер, а тег ‹script› в нем обеспечит интерактивность страницы в браузере.
Обязательно изучите вкладку «Сеть» в инструментах разработчика Chrome, чтобы узнать, какие ресурсы вы получаете на каждом маршруте.
Я также создал два файла конфигурации Snowpack, snowpack.config.dev.js предназначен для разработки, когда вы запускаете npm run dev. Snowpack.config.js предназначен для производства после того, как вы «соберете снег» в приложении, я намеренно установил режим «test» в snowpack.config.js, чтобы вы могли почувствовать, как можно использовать конфигурацию.
Я не настраивал горячую загрузку модуля (htm) в этом приложении, дайте мне знать, если вы хотите это сделать :-).
Спасибо за чтение и дайте мне знать, если у вас возникнут вопросы :-)
