babel plugin for vue3 jsx HMR
npm install babel-plugin-vue-jsx-hmrbash
npm i -D babel-loader @vue/babel-plugin-jsx babel-plugin-vue-jsx-hmr
``js
// webpack.config.js
{
test: /\.(?:jsx|tsx)(\.js)?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
plugins: ['@vue/babel-plugin-jsx', 'babel-plugin-vue-jsx-hmr']
}
}
}
`
In your webpack config, be sure to have the following options:
`js
devServer: {
liveReload: false,
hot: true,
}
`
$3
`bash
npm i -D babel-loader @vue/babel-plugin-jsx babel-plugin-vue-jsx-hmr
``js
// rspack.config.js
{
test: /\.(?:jsx|tsx)(\.js)?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
plugins: ['@vue/babel-plugin-jsx', 'babel-plugin-vue-jsx-hmr']
}
}
},
`$3
@vitejs/plugin-vue-jsxHMR Detection
The same principle as @vitejs/plugin-vue-jsx, so to speak, and its version of the babel plugin, whose README is referenced here.This plugin supports HMR of Vue JSX components. The detection requirements are:
- The component must be exported.
- The component must be declared by calling
defineComponent via a root-level statement, either variable declaration or export declaration.$3
`jsx
import { defineComponent } from 'vue'// named exports w/ variable declaration: ok
export const Foo = defineComponent({})
// named exports referencing variable declaration: ok
const Bar = defineComponent({ render() { return
Test }})
export { Bar }// default export call: ok
export default defineComponent({ render() { return
Test }})// default export referencing variable declaration: ok
const Baz = defineComponent({ render() { return
Test }})
export default Baz
`$3
`jsx
// not using defineComponent call
export const Bar = { ... }// not exported
const Foo = defineComponent(...)
``