Vite: Better SSR support [watch build]

[surmon-china]

Feature

I am using vite to build an SSR website, during which I tried to implement a nuxt-like, faster SSR framework, but I need better support.

I wish build and ssrBuild can support watch mode, or there be watchBuild and watchSSRBuild functions

SSR inevitably requires real-time compilation of products (Client & Server)

In my test.

First, a form of fileWatcher(files, () => build().then(() => restart())) is used to track file changes and execute compile, but this will do a full build without cache support, which takes a long time.

const watcher = chokidar.watch(path.resolve(__dirname, 'src'), {
  ignored: [/node_modules/, /\.git/],
  awaitWriteFinish: {
    stabilityThreshold: 100,
    pollInterval: 10
  }
})

watcher.on('change', info => {
  ssrBuild({/* ... */})
})

Second. If you use rollup.watch to compile, you can quickly update the product and achieve a better development experience.

const rullupConfig = {
    input: path.resolve(root, entry),
    preserveEntrySignatures: false,
    ...rollupInputOptions,
    // ...
}

 const watcher = rollup.watch({
    ...rullupConfig,
    output: {
        // ...
        ...rollupOutputOptions
    },
    watch: {
        ...rollupWatchOptions
        chokidar: chokidar.watch(/* watchPath */, {
            ignored: [/node_modules/, /\.git/],
            awaitWriteFinish: {
                stabilityThreshold: 100,
                pollInterval: 10
            }
        }),
    }
})


watcher.on('event', event => {
    if (event.code === 'BUNDLE_END') {
        doRestart()
        // emit something...
        // write files...
        // ...
    }
});

However, the implementation of the build function in the vite src/node/build/index.ts:build file is too complex and deeply coupled, and I have to re-implement it externally, so I hope this can be extracted as a single function.

links

• rollup.watch & write
• roolup watch.skipWrite option

[aleclarson]

Watch support for build would also be super useful when working on legacy bundles (via vite-plugin-legacy).

[surmon-china]

I can submit a pull request to implement this feature.

@yyx990803 @antfu @underfin

[akkayy]

vite build --watch (defaulted to dev mode) will be very invaluable...

Similar to.. @surmon-china

• Snowpack (snowpackjs/snowpack#782) &
• Vue-Cli (vuejs/vue-cli#1317)

vite build --watch --hmr like snowpack (https://github.com/snowpackjs/snowpack/issues/1002) would be the ultimate...

[arpowers]

@surmon-china any updates on the PR?

I've taken a look at Vite source and I agree this would be a pretty simple change. Basically, Rollup should just run rollup.watch instead of rollup.rollup if we are in NODE_ENV=development mode. From there, I think we would be able to add the standard watch options via the existing rollup options.

I would do the PR myself but I can't figure out exactly how I'm supposed to run the playground, testing, and dev server to create an acceptable result... For someone experienced with the codebase, any thoughts?

[cawa-93]

watch support for build would also be super useful when you develop electron app.