Using chokidar + vite + tailwindcss for real-time development of a component library

Oct 8, 2024#chokidar #code #ts200

AI Translation

This post is translated from Chinese into English through AI.View Original

AI-generated summary

The author is developing a multi-platform project using a monorepo and wants to create a lightweight component library. They chose Vite for bundling, but found that Vite's development mode does not support this functionality. Using TypeScript's `tsc` for file watching results in differences between the output and Vite's build, and it does not support real-time Tailwind bundling. As a solution, they are using Chokidar to watch files in the `src` directory and trigger a Vite build.

I am developing a multi-platform project using a monorepo, and I want to separate the component library into a very lightweight package. I chose Vite for packaging, but it seems that Vite's development mode does not support this feature. If I use tsc to watch for file changes, the output of the build differs from vite build, and it does not package Tailwind in real-time. Finally, I use chokidar to watch for files in the src directory and execute vite build.

  "scripts": {
    "watch-build": "chokidar './src/**/*' -c 'vite build'"
  },