如何在每次更改时让 Vite 构建我的文件？答案

【问题标题】：How do I make Vite build my files every time a change is made?如何在每次更改时让 Vite 构建我的文件？
【发布时间】：2022-12-14 22:30:53
【问题描述】：

每次我在开发过程中保存/更改我的文件时，我都试图让 Vite 构建我的文件并将它们输出到 dist 文件夹中。

我该怎么做？

这是我的vite.config.development.js 文件：

import { defineConfig } from "vite";
export default defineConfig({
    base: "./",
    build: {
        rollupOptions: {
            output: {
                assetFileNames: "assets/[name].[ext]",
                chunkFileNames: "assets/[name].[ext]",
                entryFileNames: "assets/[name].js",
            },
        },
        write: true,
    },
});

这是我在package.json 中的脚本：

"frontend-dev": "vite --config vite.config.development.js",

它执行通常的 localhost:3000 操作，但当我更改源代码时，它不会构建我的文件并将它们放入 dist 文件夹中。

目前，我每次都必须运行vite build npm 脚本，这会花费很多时间。

【问题讨论】：

你想做什么？您想在每次对文件系统进行更改时都看到开发文件吗？
@RahilWazir 是的，我有一个快速服务器，它提供构建文件夹“dist”中的静态文件，所以每次我在开发过程中进行更改时，我都想将新文件构建到 dist 文件夹中，以便我的快速服务器可以获得新的更新构建文件

标签： javascript vite

【解决方案1】：

如果你想让Vite做一个rebuild on file changes，你可以使用--watch flag：

vite build --watch

在您的情况下，使用自定义配置文件：

vite build --watch --config vite.config.development.js

启用 --watch 标志后，对配置文件以及要捆绑的任何文件的更改将触发重建并将更新 dist 中的文件。

【讨论】：

【解决方案2】：

你了解 Node.js 吗？如果您了解 NodeJS，则可以使用 fs 模块监控文件夹和文件。通过监控src目录，只要有变化就可以触发vite。这是手动解决方案。我不知道目前是否有提供此功能的 npm 包。

NodeJS Filestream Watch

【讨论】：

【解决方案3】：

基于@Mussini 的回答，您有以下选择：

在 cli 上添加 --watch 和可选的 --config vite build --watch --config vite.config.ts
或添加到 package.json：

{
  "name": "frontend",
  ...
  "scripts": {
    "dev": "vite",
    ...
    "build-watch": "vite build --watch --config ./vite.config.ts",
    "build": "vite build",

或将 --watch 集成到 vite.config.ts 中，默认将监视添加到构建 cmd（vite build 不退出！）

export default defineConfig({
  build: {
    watch: './vite.config.ts',

您可能需要选项 2 并与 npm run build-watch 一起使用

【讨论】：