8

使用捆绑器的插件来执行某些工作意味着什么，我的意思是我还没有使用捆绑器的经验，我想通过使用 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 也在抱怨我不知道如何处理它们的警告。你能解释一下我应该如何理解这个例子中捆绑和使用插件的整个过程吗？我错过了什么？非常感谢

4

0 回答 0