Создайте приложение React JS с помощью ESbuild и node. - UPROGER

Недавно мы внесли изменение в один из проектов для нашего клиента. Нам было поручено изменить загрузчик сборки приложения React JS с webpack на esbuild.

Раньше мы не работали ни с одним другим загрузчиком, кроме стандартного для react Webpack., Так что это было проблемой для нас. К счастью, нам помог Кевин Берк https://www.linkedin.com/in/ekrub/, который помог нам решить эту сложную задачу.

С переходом с Webpack на esbuild мы смогли сократить время сборки приложения на 24 секунды 😆
Теперь у нас более быстрое развертывание, и это здорово !!

Esbuild -> Выполнено за 481 мс
сборки Webpack -> Выполнено за 25.06 с.

Основываясь на работе Кевина, мы можем изменить загрузчик с Webpack на esbuild с помощью этих простых шагов.

Создайте папку «build» в корне вашего проекта.

cd your_project
mkdir build

Создайте файл index.js в качестве держателя файла восстановления в папке «build».
touch build/index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <link rel="icon" href="favicon.png"/>
    <meta name="viewport" content="width=device-width,initial-scale=1"/>
    <meta name="theme-color" content="#000000"/>
    <link rel="manifest" href="/manifest.json"/>
    <title>Dashboard</title>
    <link href="/static/css/index.css" rel="stylesheet">
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <script src="/static/js/index.js"></script>
  </body>
</html>

Добавьте пакет esbuild к вам node_packages
yarn add esbuild или npm install esbuild — save
Добавьте в свое приложение «регенератор-среду выполнения». Это необходимо для выполнения вызовов выборки.
yarn add regenerator-runtime или npm install regenerator-runtime — save

В вашем src/index.jsx добавьте вверху:

...
import "regenerator-runtime/runtime";

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
)
...

Создайте файл build.js в корне вашего проекта
touch build.js

const { build } = require('esbuild');
const fs = require('fs-extra');

const generateBuild = async () => {
  await fs.rmdirSync('./build/static', { recursive: true });

  await build({
    entryPoints: ['./src/index.jsx'],
    outdir: './build/static/js',
    minify: true,
    bundle: true,
    sourcemap: true,
    target: ['chrome58', 'firefox57', 'edge16'],
    loader: { ".svg": "dataurl", ".png": "dataurl" },
    define: {
      'process.env.NODE_ENV': "'production'",
      ...your env variables...,
    }
  }).catch(() => process.exit(1));

  await fs.move('./build/static/js/index.css', './build/static/css/index.css', (err) => {
    if (err) return console.error(err);
    console.log("success!");
    return null;
    }
  );
};

generateBuild();

Добавьте в свои пакеты пакет ‘fs-extra’
yarn add fs-extra или nom install fs-extra —save
Запустите свою сборку
node build.js
Сгенерированные файлы теперь должны находиться в папке build.
Вы должны изменить свои сценарии сборки, чтобы использовать эту команду сборки.

"scripts": {
    ...
    "esbuild": "node ./build.js"
    ...
 },

Дополнительные шаги:

Чтобы использовать esbuild в режиме разработки и следить за изменениями в файлах:

Поскольку мы обслуживаем сборку из другой папки и с разными конфигурациями, нам нужно запустить сервер в этой новой папке и использовать новые конфигурации.

Сценарий реакции запускает приложение по умолчанию в текущей папке и по умолчанию ищет файл src / index.jsx, к сожалению, мы не можем изменить это поведение по умолчанию без извлечения. Итак, мы собираемся использовать отдельный сервер (сервер) для запуска из нашей новой папки сборки.

При запуске терминала npx servor ./build/ index.html --reload
он попросит установить servor пакет.
Затем он будет запущен с переданными параметрами и будет обслуживаться из папки «build».

Теперь, когда у нас запущен сервер, нам нужен способ отслеживать изменения файлов и обновлять страницу. Пакет Chokidar отлично подходит для этого.

Давайте установим пакет chokidar

yarn add chokidar -D или npm install chokidar --save

Измените скрипт build.js, чтобы добавить chokidar.

const { build } = require('esbuild');
const chokidar = require('chokidar');
const fs = require('fs-extra');

const generateBuild = async () => {
  await fs.rmdirSync('./build/static', { recursive: true });

  await build({
    entryPoints: ['./src/index.jsx'],
    outdir: './build/static/js',
    minify: true,
    bundle: true,
    sourcemap: true,
    target: ['chrome58', 'firefox57', 'edge16'],
    loader: { ".svg": "dataurl", ".png": "dataurl" },
    define: {
      'process.env.NODE_ENV': "'production'",
    }
  }).catch(() => process.exit(1));

  await fs.move('./build/static/js/index.css', './build/static/css/index.css', (err) => {
    if (err) return console.error(err);
    console.log("success!");
    return null;
    }
  );
};

chokidar.watch('.', {ignored:/build|node_modules|.git/}).on('all', (event, path) => {
  console.log(event, path);
  generateBuild();
});

Не забывай

В одном терминале у вас должен быть запущен сервер,
npx servor ./build/ index.html --reload
а в другом терминале у вас должен быть запущен скрипт сборки
node build.js

И это все. Наслаждайтесь дополнительным временем!

Большое спасибо Кевину за то, что помог нам это расшифровать.

Вы можете найти код этого руководства в нашей учетной записи GitLab https://gitlab.com/alamedadev/react-js-build-using-esbuild