feat(cli): build watch mode

[stafyniaksacha]

Add build watch mode (through rollup)

See #1434

Enable watch mode

cli

vite build --watch

vite.config.ts

import { defineConfig } from 'vite'
import { WatcherOptions } from 'rollup'

const watcherOptions: WatcherOptions = {}
export default defineConfig({
  build: {
    watch: watcherOptions, // null to disable (default)
  },
})

Todo

• vite.config.ts reload
• Tests
• Update documentation

[aminya]

Could we get this faster? Maybe defer reloading the config file to a separate follow-up pull request?

[stafyniaksacha]

Maybe defer reloading the config file to a separate follow-up pull request?

I think this will be the way I will follow, introducing a watcher for vite.config.ts/vite.config.js file seem to be harder than I expected: What I ended is to create a custom chokidar instance to watch them.

The caveat is that updated plugins will not trigger rebuild ... and that one of the main goal of this functionality

Maybe we can create a custom vite watch command instead to keep things clear

@yyx990803 where I can add related tests for that functionality ?

[Shinigami92]

Havn't tested it, but code looks okay to me 🙂

We may await additional reviews from e.g. core members

[patak-dev]

This works great!

As @Shinigami92 suggested, we should add the -w option as webpack does.

Also, it would be nice to add line breaks so the output looks like

vite v2.1.2 building for production...

watching for file changes...

✓ 18 modules transformed.

And it is easier to see that we are in watch mode

There should also be an extra break line between build outputs so it is easy to identify each one.

Current output:

λ yarn build --watch
yarn run v1.22.10
$ vite build --watch
vite v2.1.2 building for production...
watching for file changes...
✓ 18 modules transformed.
dist/index.html                  0.16kb
dist/assets/index.cef4026c.js    2.49kb / brotli: 0.75kb
dist/assets/vendor.ebcc162a.js   196.17kb / brotli: 41.34kb
built in 1650ms.

Note: Using vite preview I was not able to reload the page after the re-build. Do you know why this is happening? I tried with serve and it works correctly.

[KieranP]

Would be great if this was able to push the updated files to the browser also, in the same way that Snowpack does. Besides watching files and building them, it also spins up a small node web server through which it pushes updates to the browser via websockets. In development builds, it injects a small bit of JS into the build which connects to the local node server to receive those updates. Works really well. Just a thought...

[stafyniaksacha]

Also, it would be nice to add line breaks so the output looks like

I improved the output and added the -w shorthand !

$ vite build -w
vite v2.1.5 building for production...

watching for file changes...

build started...
✓ 4 modules transformed.
dist/index.html                  1.63kb
dist/assets/index.3e06ead4.css   0.23kb / brotli: 0.13kb
dist/assets/index.6c81d39f.js    0.63kb / brotli: 0.32kb
built in 343ms.

build started...
✓ 5 modules transformed.
dist/index.html                  1.63kb
dist/assets/index.3e06ead4.css   0.23kb / brotli: 0.13kb
dist/assets/index.6c81d39f.js    0.63kb / brotli: 0.32kb
built in 231ms.

Note: Using vite preview I was not able to reload the page after the re-build. Do you know why this is happening? I tried with serve and it works correctly.

The main goal of the two commands are different: vite serve is an alias of vite command, so it will not pass through rollup. It uses its own watcher and inject HMR functionalities. Unlike vite preview which just run a http server with sirv package on the outDir keeping the served files untouched.

[patak-dev]

Great! Thanks for taking care of that details 👍🏼

I meant that reloads works using https://www.npmjs.com/package/serve, but it doesn't reload correctly using vite preview that as you said, uses sirv internally. I think this is unrelated to this PR though.

[patak-dev]

Thanks a lot for implementing this feature @stafyniaksacha 🙌🏼

[cawa-93]

@stafyniaksacha How to use it programmatically? In my project I run

const {build} = require('vite')

customFileWatcher(() => build({mode, configFile: 'path/to/vite.config.js'}) )

It's not very obvious to me how to programmatically run a build and file watcher after this PR.

[stafyniaksacha]

hi @cawa-93 this should do the tricks:

const { build } = require('vite')
const config = { 
  mode,  
  configFile: 'path/to/vite.config.js',
  build: {
  /**
   * Rollup watch options
   * https://rollupjs.org/guide/en/#watchoptions
   */
    watch: {}
  }
}
customFileWatcher(() => build(config) )

[aleclarson]

Why is close called immediately?

[aleclarson]

Looks like this close call is a no-op. Is this line accidental?

See here:
https://github.com/rollup/rollup/blob/dba6f13132a1d7dac507d5056399d8af0eed6375/src/watch/watch-proxy.ts#L16
https://github.com/rollup/rollup/blob/dba6f13132a1d7dac507d5056399d8af0eed6375/src/watch/watch-proxy.ts#L31-L33
https://github.com/rollup/rollup/blob/dba6f13132a1d7dac507d5056399d8af0eed6375/src/watch/watch.ts#L47