Virtual modules with HMR plugin for Vite
Install Vite Plugin Virtual:
$ npm install -D vite-plugin-virtual
Add to your vite.config.js
:
import virtual from 'vite-plugin-virtual'
export default {
plugins: [
virtual({
'virtual:module': `export default { hello: 'world' }`,
'virtual:config': { hello: 'world' }
})
]
}
In your sources you can now import the virtual modules
import obj from 'virtual:config'
console.log(obj)
You can update the virtual module during dev
import virtual, { updateVirtualModule } from 'vite-plugin-virtual'
const plugin = virtual({
'virtual:module': `export default { hello: 'world' }`,
'virtual:config': { hello: 'world' },
'virtual:lazy': () => `Hello ${'computed'} world`,
})
updateVirtualModule(plugin, 'virtual:config', { hello: 'new message' })
You can invalidate the virtual module during dev in case the config changes
import virtual, { invalidateVirtualModule } from 'vite-plugin-virtual'
const modules = {
'virtual:module': `export default { hello: 'world' }`,
'virtual:config': { hello: 'world' }
}
const plugin = virtual(modules)
const server: ViteDevServer
modules['virtual:config'] = { hello: 'new message' }
invalidateVirtualModule(server, 'virtual:config')
- Adapted logic from @rollup/plugin-virtual
- Project setup adopted from @antfu's Vite plugins
MIT License © 2021 patak-js