Добавление поддержки статических ресурсов
Эта статья теперь является частью гораздо более длинной серии публикаций под названием Как заставить приложения CRA работать с SSR. Вы можете найти код здесь на github.
В Части 1 мы начали работать над более полезным способом реализации рендеринга на стороне сервера в реагирующем приложении, созданном с помощью create-react-app. На данный момент импорт активов не работает.
Я избежал проблемы в предыдущем посте, удалив импорт. Давайте добавим их обратно.
>>> client/src/App.js import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; // ...
Это проблема, которую вебпак (и многие другие сборщики) уже решил за нас. На данный момент это кажется очевидным выбором для его использования. И есть плагин для Babel, который делает именно это — babel-plugin-webpack-loaders.
Плагин BPWL работает за счет внешнего запуска webpack и позволяет нам использовать загрузчики webpack как часть преобразований babel.
Однако BPWL не поддерживает babel@v7 и является тупиком. Это все еще работает, если вы используете babel@v6.
Решение
Мы будем использовать подключаемый модуль babel babel-plugin-transform-assets для работы с импортом активов.
Он преобразует импорт активов в слаги, похожие на веб-пакет. Это имеет решающее значение для поддержания работоспособности импорта между нашим приложением, отображаемым на сервере, и выводом нашей клиентской сборки.
Чтобы все заработало, установите плагин…
# client/ npm i babel-plugin-transform-assets
… и добавьте конфиг.
>>> client/package.json { "babel": { "plugins": [ "@babel/plugin-transform-modules-commonjs", [ "transform-assets", { "extensions": [ "css", "svg" ], "name": "static/media/[name].[hash:8].[ext]" } ] ], ... }
Теперь все должно работать.
# client/ > [email protected] build /my-app/client > react-scripts build && npm run lib Creating an optimized production build... Compiled successfully. ... > [email protected] lib /my-app/client > rm -rf lib/ && NODE_ENV=production babel src/ -d lib/ && npm run lib:esm Successfully compiled 4 files with Babel. > [email protected] lib:esm /my-app/client > find lib/ -type f -name *.js -exec sed -i'' -e 's|@babel/runtime/helpers/esm|@babel/runtime/helpers|g' {} + # server/ npm start > [email protected] start /home/shirsh.zibbu/my-app/server > npm run lib && node ./bin/www > [email protected] lib /home/shirsh.zibbu/my-app/server > rm -rf lib/ && babel src/ -d lib/ Successfully compiled 5 files with Babel.
Конец
Все, что мы сделали, это заполнили пробелы, которые мы оставили. Получить код можно здесь на github. Далее идет управление данными с помощью Redux.
PS: хотя я отказался от BPWL, он может сработать для вас. Вы можете найти этот код здесь.