在这篇文章中，我将扩展设置，添加 TailwindCSS 用于样式设置，Jest 用于单元测试。

配置 TailwindCSS

为了启用“TailwindCSS”，我们需要添加“PostCSS”并编写一个小型的 esbuild 插件以在我们的 css 文件中启用 TailwindCSS。

首先我们需要安装以下依赖项：

npm i --save-dev postcss tailwindcss autoprefixer

现在让我们创建一个 esbuild 插件，我们可以将其添加到我们的脚本中以启用 postcss 和 tailwindcss：

import { readFile } from 'node:fs/promises';
import postcss from 'postcss';
// esbuild Plugin to process css files with postcss
export const postcssPlugin = ({
  plugins = []
} = {}) => {
  return {
    name: 'postcss',
    setup(build) {
      build.onLoad({ filter: /\.css$/ }, async (args) => {
        const raw = await readFile(args.path, 'utf8');
        const source = await postcss(plugins).process(raw.toString(), {
            from: args.path
          });
        return {
          contents: source.css,
          loader: 'css'
        };
      });
    }
  };
}

export default postcssPlugin;

现在，我们可以在您的 esbuild 配置中使用该插件：

{
  //...esbuildConfig,
  plugins: [
    postcssPlugin({
      plugins: [
        tailwindcss(),
        autoprefixer
      ]
    })
  ]
}

并创建我们初始的 tailwindcss 配置 `tailwind.config.ts`：

import type { Config } from 'tailwindcss';

const config: Config = {
  content: [
    './src/**/*.{ts,tsx,svg}'
  ],
  // Theme
  theme: {
    extend: {
      colors: {
        background: 'var(--background)',
        foreground: 'var(--foreground)',
      }
    }
  }
};

export default config;

配置 Jest

为了在我们的项目中启用 Jest，我们将使用 `@testing-library`，因为它将简化配置和测试实用程序。

安装以下依赖项：

npm i --save-dev jest jest-environment-jsdom @testing-library/jest-dom @testing-library/react @types/jest

要使用“react”和 esbuild 配置 Jest，我们需要创建一个转换器来转换“typescript”和“jsx”。

import { transformSync } from 'esbuild';
export default {
  process(src, filename) {
    // Ensure only TypeScript and JavaScript files are processed
    if (/\.(ts|tsx|js|jsx)$/.test(filename)) {
      const result = transformSync(src, {
        loader: filename.endsWith('ts') || filename.endsWith('tsx') ? 'tsx' : 'jsx',
        format: 'esm',  // ESM format
        sourcemap: 'inline', // Inline sourcemaps for debugging
        target: 'esnext', // Set the target to latest ECMAScript
        tsconfigRaw: {
          compilerOptions: {
            jsx: 'react-jsx'
          },
        }
      });
      return { code: result.code, map: result.map };
    }
    return src;
  },
};

我们还需要一个环境设置文件来从“@testing-library”导入“jest-dom”，这样我们就可以使用像“toBeInTheDocument”和“toBeInTheDOM”这样的库匹配。

import '@testing-library/jest-dom';

最后，我们可以创建一个配置文件“jest.config.json”，它将使用我们的自定义 esbuild 转换器和设置文件。

{
  "testMatch": [
    "/**/?(*.)+(test).(ts|tsx)"
  ],
  "transform": {
    "^.+\\.(ts|tsx)$": "/scripts/testTransformer.js"
  },
  "setupFilesAfterEnv": [
    "/scripts/testSetup.ts"
  ],
  "moduleFileExtensions": ["ts", "tsx", "js", "jsx", "json", "node"],
  "extensionsToTreatAsEsm": [".ts", ".tsx", ".svg"],
  "transformIgnorePatterns": ["/node_modules/"],
  "testEnvironment": "jsdom"
}

这将允许我们在项目中运行 jest 测试文件。由于我们使用“esm”，所以我们必须使用节点“--experimental-vm-modules”标志。

还有一些在 React 项目中常用的实用程序，例如将 `SVG` 导入为 `Components` 并在更改时自动重新加载。我已将这些包含在我的存储库中：

willyelm / react-app-seed

使用 SSR、CSR、Jest、TailwindCSS 和 esbuild 设置简单的 React 应用程序

使用 SSR 和 esbuild 设置的简单 React 应用

该项目利用 react@19、react-router-dom@7 和其他的最新功能来配置 SSR。

依赖项

项目结构

react-app/             # This will be our workspace directory.
  - public/
  - scripts/           
    - build.js         # Bundle our server and client scripts.
    - config.js        # esbuild config to bundle.
    - dev.js           # Bundle on watch mode and run server.
  - src/
    - App/             # Our components will be here.
      - App.tsx        # The