👀 How to - vite-plugin-watch-and-run

Adding watch mode to any command / Tool!

Installation

npm i -D vite-plugin-watch-and-run

pnpm add -D vite-plugin-watch-and-run

yarn add --dev vite-plugin-watch-and-run

bun add --dev vite-plugin-watch-and-run

Configuration

Add watchAndRun plugin with the following configuration:

• watch: a glob pattern to watch for changes. This will be matched against the absolute path for altered files.
• run: a command to trigger when a file change is detected (You can be very creative 🥳!)

import path from 'path'
import { watchAndRun } from 'vite-plugin-watch-and-run'
import { defineConfig } from 'vite'
 
export default defineConfig({
  plugins: [
    watchAndRun([
      {
        name: 'gen',
        watch: path.resolve('src/**/*.(gql|svelte)'),
        run: 'npm run gen'
        // watchKind: ['add', 'change', 'unlink'], // (default)
        // delay: 300                              // (default)
      }
    ])
  ]
}

Side Notes

• Full list of watchKind can be found here: https://github.com/paulmillr/chokidar#api

• delay is good in case you have 200 files added realy fast! Like this the cmd is executed only once.

• For the run command we recommend to use npm run xxx as it will work for npm, yarn and pnpm 🙃

• watch infos

  • You can use glob patterns to watch for changes under the root directory.

{
  watch: path.resolve('**/*.ts')
}

• You can use absolute path to watch for changes on a specific file on your machine. That’s useful if you want to watch for changes on a file that is in your monorepo for example!

{
  watch: path.resolve('../../README.md')
}

• You can also go with watchFile that is a function that will be called with the filepath. Inside, you can decide what to do.