esbuild.app.config.ts - react19 - lizardking/react_project

esbuild.app.config.ts
84 строки2 KB
LizardKing
Task 7 - ESBuild
26 окт 2025, 16:46
26 окт 2025, 16:4644678c3
import { build, context, type BuildOptions } from 'esbuild'
import { htmlPlugin } from 'esbuild-html-plugin'
import copy from 'esbuild-plugin-copy'
import tailwindPlugin from 'esbuild-plugin-tailwindcss'
import path from 'node:path'
import process from 'node:process'

type BuildMode = 'dev' | 'prod';

function getCliMode(): BuildMode {
  const arg = process.argv.find((argument) =>
    argument.startsWith('--mode=')) ?? '--mode=dev'
  const env = arg.split('=')[1]
  return env === 'prod' ? 'prod' : 'dev'
}

function hasServeFlag(): boolean {
  return process.argv.includes('--serve')
}

async function run(): Promise<void> {
  const isProd = getCliMode() === 'prod'
  const out = path.resolve('dist/esbuild')
  // noinspection HtmlUnknownTarget
  const common: BuildOptions = {
    entryPoints: [path.resolve('src/main.tsx')],
    outdir: out,
    bundle: true,
    splitting: true,
    format: 'esm',
    platform: 'browser',
    target: ['es2020'],
    treeShaking: true,
    sourcemap: true,
    minify: isProd,
    logLevel: 'info',
    define: { 'process.env.NODE_ENV': JSON.stringify(isProd ? 'production' : 'development') },
    entryNames: 'app',
    chunkNames: 'chunks/[name]-[hash]',
    assetNames: 'assets/[name]-[hash]',
    metafile: true,
    loader: { '.css': 'css', '.svg': 'file' },
    plugins: [
      tailwindPlugin(),
      copy({
        assets: {
          from: ['./public/*'],
          to: [''],
        },
      }),
      htmlPlugin({
        outfile: 'index.html',
        language: 'ru',
        createHeadElements: (outputUrls) => [
          '<meta charset="utf-8" />',
          '<meta name="viewport" content="width=device-width, initial-scale=1" />',
          '<meta name="description" content="Test React FSD">',
          '<link rel="icon" type="image/svg" href="favicon.svg" />',
          ...outputUrls
            .filter((url) => url.endsWith('.css'))
            .map((url) => `<link rel="stylesheet" href="${url}">`),
          '<title>ESBuild + React + TS + FSD</title>'
        ],
        createBodyElements: (outputUrls) => [
          '<div id="root"></div>',
          ...outputUrls
            .filter((url) => url.endsWith('.js'))
            .map((url) => `<script type="module" src="${url}"></script>`),
        ],
      }),
    ],
  }
  if (isProd) {
    await build(common)
    return
  }
  const buildContext = await context(common)
  await buildContext.watch()
  if (hasServeFlag()) {
     await buildContext.serve({ servedir: out, port: 5555 })
  }
}

run().catch(() => process.exitCode = 1)