Рубрики
Без рубрики

Создайте Attact JS приложение с Esbuild и узел.

Создайте Attact JS приложение с Esbuild и узел.

Автор оригинала: Osledy Bazó.

Недавно мы сделали изменения в одном из проектов для нашего клиента, нам было поручено изменение погрузчика погрузчика приложения REVENTJS из WebPack в Esbuild.

Мы не работали раньше с любым другим погрузчиком, кроме по умолчанию из React WebPack., Так это было для нас проблема. К счастью, у нас была помощь Kevin Burke https://www.linkedin.com/in/ekrub/, чтобы направлять нас и решить эту непростой задачу.

С тобой изменить из WebPack в Esbuild, мы могли бы побриться 24 секунды приложения Build 😆 У нас сейчас быстрее развертывание, и это здорово !!

Esbuild -> Сделано в 481 мс WebPack Build -> сделано в 25.06.

На основании работы Кевина мы можем изменить погрузчик из WebPack в Esbuild с этими простыми шагами.

  1. Создайте папку «Build» в корне вашего проекта
cd your_project
mkdir build
  1. Создайте файл index.js в качестве держателя для файла восстановления в папке «Создание» Touch Build/index.html



  
    
    
    
    
    
    Dashboard

  1. Добавьте пакет Esbuild ‘для вас Node_Packages пряжа добавить esbuild или NPM установить Esbuild -save

  2. Добавьте «Regenerator-Runtime» в ваше приложение. Это нужно для изготовления вызовов. пряжа Добавить регенератор-время выполнения или NPM Установите Regenerator-Runtime --save

В вашем SRC/index.jsx Добавьте сверху:

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

ReactDOM.render(
  
    
  
)
...
  1. Создайте файл 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();

  1. Добавьте пакет FS-Extra для ваших пакетов пряжа Добавить FS-Extra или NOM Установите FS-Extra -Save

  2. Запустить свою сборку Узел Build.js.

  3. Сгенерированные файлы должны быть в папке «Build» сейчас.

  4. Вы должны изменить сценарии сборки для использования этой команды сборки.

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

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

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

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

React-Script Запустите приложение по умолчанию в текущей папке и выглядит по умолчанию для файла SRC/index.jsx, к сожалению, мы не можем изменить это поведение по умолчанию без выброса. Таким образом, мы собираемся использовать отдельный сервер (сервер), чтобы начать с нашей новой папки сборки.

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

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

Позволяет установить пакет Chokidar

пряжа Добавить Chokidar -D или NPM установить Chokidar --save

Измените сценарий Build.js, чтобы добавить часовой часовой

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 И в другом терминале вы должны иметь сценарий сборки Узел Build.js.

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

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

Вы можете найти код для этого руководства в вашем аккаунте GitHUB HTTPS://gitlab.com/alamedAdev/react-js-build-uss-esbuild

Читайте ещё по теме: