How Can I Trigger the `build` Command Automatically on File Changes in a Vite + TypeScript + Vue3 Project?

I’ve been working on a Vite-based project where I’m using TypeScript and Vue 3. Everything has been running smoothly until I faced a minor inconvenience: I need to trigger the build command whenever there’s a change in any of the project’s files. Typically, I would use a tool like nodemon for such tasks, but I wanted to achieve this without having to manually install and configure nodemon.

Here’s a quick look at my package.json:

"scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview"
}

In the above scripts, vue-tsc is responsible for type-checking the TypeScript code, and vite build carries out the actual build process. Both vue-tsc and vite build support the --watch mode individually, but combining them seamlessly into a single, cohesive command was the challenge.

Understanding Individual Commands:

Firstly, let’s break down what each part of the build script does:

• vue-tsc: This command invokes the TypeScript compiler specifically for Vue SFCs (Single File Components). It’s used to ensure type correctness across the project.

• vite build: This command builds the project, optimizing assets and preparing them for production deployment.

Both commands support a --watch flag:

• vue-tsc --watch: This flag tells the TypeScript compiler to watch for changes and recompile automatically.

• vite build --watch: This flag tells Vite to watch for changes and rebuild automatically.

Combining the Commands:

To combine both commands into a single one and ensure they both trigger whenever there is a file change, we can utilize a package like concurrently or npm-run-all. These packages allow us to run multiple npm scripts concurrently.

Using concurrently

Here’s how you can set it up:

1. First, you need to install concurrently:

npm install concurrently --save-dev

1. Update the scripts section of your package.json to use concurrently for the build process:

"scripts": {
    "dev": "vite",
    "build": "concurrently \"vue-tsc --watch\" \"vite build --watch\"",
    "preview": "vite preview"
}

Using npm-run-all

Alternatively, you could use npm-run-all:

1. Install npm-run-all:

npm install npm-run-all --save-dev

1. Modify your package.json:

"scripts": {
    "dev": "vite",
    "type-check": "vue-tsc --watch",
    "build-watch": "vite build --watch",
    "build": "npm-run-all --parallel type-check build-watch",
    "preview": "vite preview"
}

In this configuration:

• The type-check script runs vue-tsc in watch mode.

• The build-watch script runs vite build in watch mode.

• The build script uses npm-run-all to run both type-check and build-watch in parallel.

How it Works:

By using either concurrently or npm-run-all, you’re telling npm to simultaneously run both vue-tsc and vite build in watch mode. This setup ensures that any change in your files triggers both type-checking and the build process automatically.

In conclusion, while third-party modules like concurrently and npm-run-all might seem like additional overhead, they’re quite lightweight and very handy in scenarios like this one. They help to streamline your development workflow by automating repetitive tasks without having to resort to extensive, low-level configurations.