🔥🔥🔥 Представляем Esbuild, компиляция быстро вверх !!!

Нынешние руки горячего обновления проекта становятся медленнее и медленнее, поэтому возникает появление этой статьи, это учебная статья, текущий набор появился в среде разработки компании, этот пример является предыдущим экспериментом для тестирования и делай. Этот учебный код и реальное введение кода проекта или определенную разницу, если партнеры также хотят ввести упаковку Esbuild для проекта компании, вы можете оставить комментарий.

Поскольку проект компании является старым, я в основном обратился к опыту работы в среде разработки.

🔥 Создание базового проекта CRA

Давайте начнем с создания основного проекта React.

yarn create react-app my-app

Предварительный просмотр папки

После создания тестового проекта давайте посмотрим, какие проблемы мы должны решить, чтобы представить Esbuild?

Нам нужен локальный сервер , это отобразит упакованные файлы.
Библиотека Для анализа командной строки также необходимы аргументы , чтобы пройти переменные для среды разработки.
Также необходимо удалить последний упакованный файл каждый раз, когда вы запускаете проект.
Существует также необходимость в решении номер порта Анкет
Решите Икона SVG Анкет
Представьте Esbuild для упаковки.

С решением вышеупомянутой проблемы мы можем реализовать эту демонстрацию.

🔥 Скачать пакеты зависимостей

yarn add browser-sync --dev

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

yarn add chalk --dev

Основная цель этого пакета – украсить стиль персонажа терминала.

yarn add command-line-args --dev

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

yarn add del --dev

В основном мы используем этот пакет для выполнения операций удаления в упакованных файлах или папках.

yarn add get-port@5.1.1 --dev

Мы используем эту библиотеку в основном, чтобы получить текущий номер порта TCP. Я не установил последнюю версию, потому что в последней версии есть требования к Node.js, моя версия Node – v12.18.3, и ожидаемая версия узла: “^12.20.0 || ^14.13.1 ||.0.0”.

Мы копируем публичную папку и переименуют ее в Public-Dev, Index.html в этой папке является точкой входа нашего приложения.

yarn add --dev esbuild-plugin-svgr

Плагин для Esbuild, который добавляет поддержку импорта *.svg Файлы в качестве компонентов реагирования.

yarn add esbuild --dev

Последнее – установить Esbuild.

🔥 Модификационный пакет.json

    "scripts": {
        ...
+++     "dev": "node devBuild.js --dev"
      },
      ...
+++ "type": "module"

🔥 Создать devbuild.js

После изменения файла package.json, затем создайте Devbuild.js в корневой папке.

import browserSync from "browser-sync";
import chalk from "chalk";
import commandLineArgs from "command-line-args";
import del from "del";
import esbuild from "esbuild";
import getPort from "get-port";
import svgrPlugin from "esbuild-plugin-svgr";
// Create the server.
const bs = browserSync.create();
// Deconstructing environment variables
const { dev } = commandLineArgs({ name: "dev", type: Boolean });
// Delete the package folder from the public-dev folder
del.sync("./public-dev/dist");

// Start esbuild to build the package
(async () => {
  const buildResult = await esbuild
    .build({
      format: "esm", // Sets the output format of the generated JavaScript file.
      target: "es2017", // Compile to convert version
      entryPoints: ["./src/index.jsx"], // Packed Entrance
      outdir: "./public-dev/dist", // Output Directory
      chunkNames: "chunks/[name].[hash]", // Packed out file name
      incremental: dev, // Because we are listening for file changes to repack, and we want the development environment to use esbuild, dev is true.
      loader: {
        // This option changes the way the given input file is interpreted.
        ".svg": "text",
        ".png": "dataurl",
      },
      bundle: true, // Bundling files means inlining any imported dependencies into the file itself.
      splitting: true, // Code splitting is currently only available for esm output format.
      plugins: [svgrPlugin()],
      inject: ["./public-dev/react-shim.js"], // Import React into esbuild as a global variable
    })
    .catch((err) => {
      console.error(chalk.red(err));
      process.exit(1);
    });
  console.log(chalk.green("The build has finished! 📦\n"));
  // Get the port number that can be used
  const port = await getPort({
    port: getPort.makeRange(4000, 4999),
  });

  console.log(
    chalk.cyan(
      `Launching the Shoelace dev server at http://localhost:${port}! 🥾\n`
    )
  );
  // Server initialization
  bs.init({
    startPath: "/", // Initial path
    port, // Port number
    logLevel: "silent", // Log level
    logFileChanges: true, // Log file changes
    notify: true, // Small pop-up notifications in the browser
    single: true, // Provide separate index.html
    server: {
      baseDir: "public-dev", // Base Folder
      index: "index.html", // Set the server's entry file
    },
    files: "src/", // Listening to files under src
  });

  // Listening for changes under the src folder
  bs.watch(["src/"]).on("change", async (filename) => {
    console.log(`Source file changed - ${filename}`);
    // Repackaging
    buildResult.rebuild();
  });
})();

🔥 index.html

Поскольку я не хотел менять вещи непосредственно под публичным файлом, я напрямую скопировал публичную папку и переименовал ее в Public-Dev. Почему я это сделал? Главным образом потому, что я не хотел пересекаться с упакованными файлами WebPack. Поэтому я просто скопировал папку напрямую.

В файле index.html мы должны представить упакованные CSS и JS. Здесь мы должны быть осторожны при представлении JS, мы должны использовать способ ESM, чтобы представить его. В противном случае он сообщит об ошибке !!!






  
  
  
  
  
  
  
++  
  React App



  
  
++

Изменить имя суффикса компонента на .jsx

🔥 React-shim.js

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

import * as React from "react";
export { React };

🔥 Изменить app.jsx

Главное здесь в том, что использование SVG должно быть изменено. Это потому, что использование плагина esbuild-plugin-svgr должен соответствовать.

Это также важно для Измените название суффикса всех компонентов с предыдущим JS на JSX.

++ import Logo from "./logo.svg";
import "./App.css";

function App() {
  return (
    
      
++        
        
          Edit src/App.js and save to reload.
        
        
          Learn React
        
      
    
  );
}

export default App;

На данный момент введение Esbuild в CRA в порядке! Если вы заинтересованы, иди и попробуйте!

🔥 Предварительный просмотр демо

Оригинал: “https://dev.to/liujinyi/introducing-esbuild-compiling-is-straight-up-fast-59n7”