Добавление поддержки статических ресурсов

Эта статья теперь является частью гораздо более длинной серии публикаций под названием Как заставить приложения 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, он может сработать для вас. Вы можете найти этот код здесь.