Build watch mode

[yyx990803]

vite build --watch

• defaults to development mode

Use Cases

• Debugging cases that involve build-only plugins
• Debugging in legacy browsers w/ plugin-legacy
• Chrome extensions / electron?

Relevant API

https://rollupjs.org/guide/en/#rollupwatch

[stafyniaksacha]

If I get it, work have to be done here ?
https://github.com/vitejs/vite/blob/v2.0.0-beta.15/packages/vite/src/node/cli.ts#L90
https://github.com/vitejs/vite/blob/v2.0.0-beta.15/packages/vite/src/node/build.ts#L277

I can go for implementation if needed

edit: I got something working with rollup.watch here
stafyniaksacha@c0dd5ba

[xueqingxiao]

@yyx990803 Could you review this PR #1449 , and merge it ASAP?

[stafyniaksacha]

@yyx990803 Could you review this PR #1449 , and merge it ASAP?

I did not get time to finish it yet, I can take time in the end of the week to merge with master and finish it

[DaniAkash]

Looking forward to this as it'll let me build web extensions with Vite...

[wgordon17]

Adding to the chorus excited for this functionality!

[YarivGilad]

This would be a very useful feature for library mode when building UI components library 🚀

[StarkShang]

Can we use vite to build a chrome extension project?
When I build a chrome extension, I wish do the following,

1. Use manifest.json as one input file, and compile related script files, such as background.ts. And probably mount vue in background.ts with a dynamically generate element.
2. Use popup.html or options.html as other input files with vue.
   Thanks

[surjithctly]

@StarkShang Once #1449 this merged version is live, you can do that. So, on each save, it will trigger a build so you can run the project in the chrome extension local package.

[StarkShang]

Thank you very much, @surjithctly.
I have 2 more questions

1. Is Feature build watch mode #1449 works in version 2.1.5?

I am using vite@2.1.5, but I get error messages when I add watcherOptions in vite.config.ts with defineConfig. It seems that the watch property is not on BuildOptions.
And when I run command vite build --watch, I get error messages,

throw new CACError(Unknown option \${name.length > 1 ? --${name} : -${name}}``);

CACError: Unknown option --watch
at Command.checkUnknownOptions
at CAC.runMatchedCommand
at CAC.parse
at Object.

2. Can I use manifest.json file as input?

I am trying to use manifest.json as input. My project has following structure,

• src
  • manifest.json
  • background.ts
  • options
    • index.html
    • main.ts
    • ...
• package.json
• vite.config.ts

And my config is as follows,

import { resolve } from "path";
import { defineConfig } from "vite";
import { WatcherOptions } from "rollup";
import vue from "@vitejs/plugin-vue";
const watcherOptions: WatcherOptions = {};
export default defineConfig({
    root: resolve(__dirname, "src"),
    publicDir: resolve(__dirname, "public"),
    resolve: {
        alias: {
            "@": resolve(__dirname, "src"),
        },
    },
    build: {
        outDir: resolve(__dirname, "dist"),
        emptyOutDir: true,
        watch: watcherOptions,
        rollupOptions: {
            input: {
                manifest: resolve(__dirname, "src/manifest.json"),
                options: resolve(__dirname, "src/options/index.html"),
            },
        },
    },
    plugins: [
        vue(),
    ],
});

[cawa-93]

@StarkShang

1. Is Feature build watch mode feat(cli): build watch mode #1449 works in version 2.1.5?

No

2. Can I use manifest.json file as input?

No. I think it will be easier for set up build of 2-3 html pages

input: {
    background: resolve(__dirname, "src/background/index.html"),
    options: resolve(__dirname, "src/options/index.html"),
},

[StarkShang]

Thanks. @cawa-93
However, if I use html file as input file, I have to edit the url of the background script in manifest.json manually everytime after vite built.
As mentioned by @haikyuu in #163, there is a rollup plugin for this problem. But it cannot be used in vite directly.

[cawa-93]

@StarkShang

However, if I use html file as input file, I have to edit the url of the background script in manifest.json manually everytime after vite built.

Why? I'm not sure it's allowed this now, but before you could set the background page as a html file. and even if it is not allowed now, you can specify the path of the background script. You only need to do this once, because the source file will always be in the same place.

If you are bothered by hashes in the file name, you can disable them.

UPD

{
"background": {
    "page": "my-background.html"
  }
}

https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/background#example

[StarkShang]

Thanks for your reply, @cawa-93.
I noticed there is slight difference between chrome extension and mozilla. In chrome extension manifest v3, we should use a script file as service worker in manifest.json file, as denoting in Migrating from background pages to service workers.

As stated in Service Workers: an Introduction, a "service worker is a script that your browser runs in the background, separate from a web page, opening the door to features that don't need a web page or user interaction.

I have tried to using a background.html directly in manifest file as,

{
    "background": {
        "service_worker": "./background.html"
    },
}

An error with message "Service worker registration failed" is prompted by chrome.

[yunsii]

Why --watch still not work?

[patak-dev]

This PR was merged, but has not yet been released

[yunsii]

This PR was merged, but has not yet been released

I mean why still not release? 😂

[yunsii]

The feature has released at v2.2.0, changelog: v2.1.5...v2.2.0

[50kudos]

Excuse me not to open a new issue, since this is a development mode, can use case be an alternative to vite dev? Backend integration would be easier. That can't be if watcher is closed here: https://github.com/vitejs/vite/blob/main/packages/vite/src/node/build.ts#L491. Can watcher be closed by SIGTERM instead?

[JonathanSchndr]

Import SCSS are not considered.

Main JS File
import './themes/all.scss' => --watch works and rebuild the files

All.scss File
@import "default"; => --watch not works
@import "theme"; => --watch not works

Only changes in the Main JS File and All.scss start the rebuild.
Changes inside default.scss or theme.scss are not detected.

Why?

My Vite Config:

export default {
  mode: 'development', // production
  build: {
    // minify: false,
    emptyOutDir: false,
    lib: {
      entry: './src/main.js',
      name: 'Main'
    },
  }
}

CLI: vite build --watch

[farzadso]

I can confirm I have the same issue as @JonathanSchndr

[patak-dev]

@JonathanSchndr @farzadso could you open a new issue with a reproduction?

[JonathanSchndr]

@patak-js

@JonathanSchndr @farzadso could you open a new issue with a reproduction?
#3566