javascript - 将 Tailwind CSS 与 esbuild 结合使用 - 过程

Question

使用捆绑器的插件来执行某些工作意味着什么，我的意思是我还没有使用捆绑器的经验，我想通过使用 esbuild 和 tailwindcss 以及 react、typescript 和所有内容创建一个“专业”工作流来了解这一点好东西，我被困在将顺风 css 连接到 eslint 和其他东西上。
我知道要运行tailwind css，使它工作的必要库是postcss，我遵循了tailwind css docs，它说

npm install -D tailwindcss
npx tailwindcss init

它没有说明 postcss，所以我认为 esbuild 应该对此负责，我认为必须通过插件完成，有两个:
https://github.com/karolis-sh/esbuild-postcss
npm i postcss esbuild-postcss -D
和
https://github.com/martonlederer/esbuild-plugin-postcss2
npm i -D esbuild-plugin-postcss2
第一个的安装过程包括 postcss 而第二个没有，但是第二个似乎更新并且有点“在”第一个之上。
问题是它们都不起作用......这是我的 esbuild 配置:

    const { build } = require("esbuild");
    
    build({
      publicPath: "http://127.0.0.1:7000/",
      entryPoints: ["src/app.tsx", "src/app.css"],
      outdir: "public",
      // external: ["react", "react-dom"], comented out -throws error cannot use import statement outside a module
      loader: {
        ".png": "file",
        ".jpg": "file",
        ".jpeg": "file",
        ".svg": "file",
        ".gif": "file",
      },
      assetNames: "assets/[name]-[hash]", //-[hash]
      chunkNames: "chunks/[name]-[hash]",
      entryNames: "[dir]/[name]", //-[hash]
      splitting: true,
      format: "esm",
      minify: true,
      bundle: true,
      sourcemap: "external",
      // target: ["es2020", "chrome58", "firefox57", "safari11", "edge16", "node12"],
      pure: ["console.log"],
      resolveExtensions: [".tsx", ".ts", ".jsx", ".js", ".css", ".json"],
      inject: ["./process-shim.js", "./react-shim.js"],
      // watch: {
      //   onRebuild(error, result) {
      //     if (error) console.error("watch build failed:", error);
      //     else console.log("watch build succeeded:", result);
      //   },
      // },
    }).catch((error) => {
      console.error(`Build error: ${error}`);
      process.exit(1);
    });

这是我的 package.json 文件:

    {
      "name": "real-world-app",
      "version": "1.0.0",
      "description": "this is not a package",
      "main": "src/app.js",
      "scripts": {
        "build": "node ./esbuild.config.js",
        "watch": "npm run build -- --watch",
        "start": "npm run css && node ./esbuild.serve.js -w ",
        "lint": "eslint --fix --debug --cache",
        "test": "jest",
        "css": "npx tailwindcss -i ./src/app.css -o ./public/app.css"
      },
      "keywords": [
        "conduit"
      ],
      "license": "ISC",
      "repository": {
        "type": "git",
        "url": "https://github.com/dziekonskik/real-world-app"
      },
      "dependencies": {
        "esbuild": "^0.14.2",
        "esbuild-darwin-64": "^0.14.2",
        "react": "^17.0.2",
        "react-dom": "^17.0.2"
      },
      "devDependencies": {
        "@babel/preset-env": "^7.16.5",
        "@babel/preset-react": "^7.16.5",
        "@babel/preset-typescript": "^7.16.5",
        "@testing-library/dom": "^8.11.1",
        "@testing-library/jest-dom": "^5.16.1",
        "@testing-library/react": "^12.1.2",
        "@testing-library/user-event": "^13.5.0",
        "@types/jest": "^27.0.3",
        "@types/react": "^17.0.37",
        "@types/react-dom": "^17.0.11",
        "@typescript-eslint/eslint-plugin": "^5.6.0",
        "@typescript-eslint/parser": "^5.6.0",
        "esbuild-serve": "^1.0.1",
        "eslint": "^8.4.1",
        "eslint-plugin-jest": "^25.3.0",
        "eslint-plugin-react": "^7.27.1",
        "eslint-plugin-testing-library": "^5.0.1",
        "jest": "^27.4.4",
        "ts-jest": "^27.1.2",
        "typescript": "^4.5.4"
      }
    }

作为开发服务器，我使用包 esbuild serve。当我运行 css 命令时，我得到了一种输出，但是它更像是整个顺风的 css 重置，当我运行 npm run build 作为输出时，我得到了复制的指令

@tailwind base;
@tailwind components;
@tailwind utilities;

我的 VScode 也在提示我不知道如何处理它们的警告。
你能解释一下我应该如何理解这个例子中捆绑和使用插件的整个过程吗？我错过了什么？
非常感谢

Answer 1

集成 Tailwind 最简单的方法是通过他们的 CLI 单独运行它，即方法 recommended by their docs .但是，我还详细介绍了一种将 PostCSS 与 esbuild 集成并以这种方式运行 Tailwind 的方法。
方法 1:使用 Tailwind CLI
这种方法的优点是更直接，不需要 PostCSS 或任何 esbuild 配置。如果你不是绝对需要其他 PostCSS 功能，我推荐这种方法。
为此，请关注他们的installation steps listed in the docs .

npm install -D tailwindcss

npx tailwindcss init

不要忘记配置您的 content输入您的 tailwind.config.js .
要通过他们的 CLI 构建，请运行以下命令(您可能需要更新特定元素的路径)。

npx tailwindcss -i ./src/app.css -o ./public/app.css --minify

您也可以使用 npm-run-all 一起运行 esbuild 和 Tailwind 进程。

npm I -D npm-run-all

{
"scripts": {
        "build:esbuild": "node ./esbuild.config.js",
        "build:css": "npx tailwindcss -i ./src/app.css -o ./public/app.css --minify",
        "build": "npm-run-all --parallel build:*"
      },
}

类似的设置可用于监视您的开发服务器。

{
"scripts": {
        "build:esbuild": "node ./esbuild.config.js",
        "build:css": "npx tailwindcss -i ./src/app.css -o ./public/app.css --minify",
        "build": "npm-run-all --parallel build:*",
        "watch:esbuild": "node ./esbuild.serve.js",
        "watch:css": "npx tailwindcss -i ./src/app.css -o ./public/app.css --watch",
        "dev": "npm-run-all --parallel watch:*"
      },
}

方法二:使用 PostCSS
但是，如果您正在编写自定义 CSS 并需要 PostCSS 功能，或者出于任何原因需要使用 esbuild 生成 CSS，则可以将 Tailwind 作为 PostCSS 插件运行以与 esbuild 集成。
似乎没有积极维护的 PostCSS 标准 esbuild 插件，所以我尝试了一些。我选择的是 esbuild-style-plugin 这似乎效果最好。
要将此插件与 Tailwind 一起使用，您需要安装 Tailwind ( see their PostCSS install docs)。

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init

不要忘记配置您的 tailwind.config.js ，但我们实际上不需要 postcss.config.js , 因为我们将使用 esbuild-style-plugin 进行配置.
安装它:

npm i -D esbuild-style-plugin

您的 esbuild 配置将如下所示(您可以随意添加其他选项作为构建的一部分):

const postCssPlugin = require('esbuild-style-plugin')

require('esbuild')
  .build({
    entryPoints: ['src/app.jsx', 'src/style.css'],
    outdir: 'public',
    bundle: true,
    minify: true,
    plugins: [
      postCssPlugin({
        postcss: {
          plugins: [require('tailwindcss'), require('autoprefixer')],
        },
      }),
    ],
  })
  .catch(() => {
    console.error(`Build error: ${error}`)
    process.exit(1)
  })

注意我们在这里是如何配置我们的 PostCSS 插件的。该插件还有 other options用于 CSS 模块或其他预处理器(例如 SASS 或 LESS)。
需要注意的一点是，这个插件似乎也生成了 .js与您的 CSS 文件同名的文件。如果您的 CSS 文件与您的 JS 文件命名相同(例如 app.tsx 和 app.css )，这可能会导致问题。在这种情况下，您可以重命名您的 CSS 文件，或将其导入您的 JS 文件(在 import './app.css' 的顶部使用 app.tsx。如果您使用此导入方法，请不要忘记将 app.css 从您的esbuild 配置的入口点。
在首次发布此答案时，我能够获得此工作的准系统示例( GitHub repo )，但您的特定设置可能有独特的怪癖。如果可能，我会推荐第一种方法，因为它不依赖于您的捆绑器。