在esbuild中使用尾风CSS -流程

Question

用一个插件来执行一些工作意味着什么?我的意思是我还没有使用任何绑定器的经验，我想通过创建一个“专业”的工作流来了解这一点，它包含了esbuild和尾部与react，类型记录和所有的好东西，我被困在了把顺风css连接到eslint和其他部分上。我知道运行顺风css所必需的库是postcss，我遵循了顺风css文档。

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 2

第一次的分期付款过程包括邮政和第二次没有，第二次似乎是较新的和某种程度上的“之上”第一次。问题是他们都不管用..。这是我的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。当我运行css命令时，我得到了某种输出，hovewer更像是css重置了整个顺风，当我将npm运行构建作为输出运行时，我得到了复制的指令。

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

我的VScode也在抱怨我的警告，我不知道该怎么处理它们。请您解释一下，在这个例子中，我应该如何理解捆绑和使用插件的整个过程？我遗漏了什么？非常感谢

Answer 1

集成Tailwind的最简单方法是通过它们的CLI分别运行它，这是由他们的医生推荐方法。但是，我还详细介绍了一种将PostCSS与esbuild集成在一起的方法，并以这种方式运行Tailwind。

方法1:使用尾风CLI

该方法的优点是更直观，不需要PostCSS或任何esbuild。如果您不完全需要其他PostCSS特性，我建议使用此方法。

要做到这一点，请跟随他们的文档中列出的安装步骤。

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和尾风进程。

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:*"
      },
}

方法2:使用PostCSS

但是，如果您正在编写自定义CSS并需要PostCSS特性，或者出于任何原因需要使用esbuild来生成CSS，则可以将Tailwind作为一个PostCSS插件来与esbuild集成。

似乎没有一个标准的PostCSS构建插件是积极维护的，所以我尝试了几个。我决定选择的是esbuild-style-plugin，它似乎是最有效的。

要与Tailwind一起使用这个插件，您需要安装Tailwind (请参阅他们的PostCSS安装文档)。

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插件的。该插件还为CSS模块或其他预处理程序(如SASS或更少)提供了其他选择。

需要注意的一点是，这个插件似乎也生成了一个与您的CSS文件同名的.js文件。如果您的CSS文件名与JS文件(例如app.tsx和app.css)相同，这可能会导致问题。在本例中，您可以重命名CSS文件，也可以将其导入到JS文件中( import './app.css'位于app.tsx的顶部)。如果使用此导入方法，请不要忘记从esbuild的入口点中删除app.css。

在第一次发布这个答案时，我得到了一个简单的示例(GitHub回购)，但是您的特定设置可能有独特的怪癖。如果可能的话，我会推荐第一种方法，因为它不依赖于您的绑定器。