vite-plugin-lang-jsx
Support write jsx in js files
English | 简体中文
✅ Support write jsx
in .vue
files
✅ Compatible create-react-app
Install
npm i vite-plugin-lang-jsx -D
Usage
Vue2 Project
Automatically add lang="jsx"
to <script>
tag when using vite-plugin-vue2
🚧 The plugin should be placed before vite-plugin-vue2
import langJsx from 'vite-plugin-lang-jsx'
import { createVuePlugin } from 'vite-plugin-vue2'
export default {
plugins: [
langJsx(/* options */),
createVuePlugin(),
]
}
create-react-app
import langJsx from 'vite-plugin-lang-jsx'
export default {
plugins: [
langJsx(),
// ...other plugins
]
}
API (Define)
export interface LangJsx {
(options?: {
filter?: (id: string) => boolean | void;
/**
* Check JSX with ast, and use RegExp by default.
*/
useAst?: boolean;
}): Plugin[];
}
How to work
.vue
files
// source code
<script>
export default {
render() {
return <div>Hello world!</div>;
},
}
</script>
// transformed
<script lang="jsx">
export default {
render() {
return <div>Hello world!</div>;
},
}
</script>
.js
files
// source code
import JsxComponent from './jsx-component'
// add `lang.jsx` suffix
import JsxComponent from './jsx-component?lang.jsx'
Why
While we upgrade the Vue2.x proejct created by @vue/cli
to Vite, we will use vue-plugin-vue2
.
-
However,
vue-plugin-vue2
does not automatically handle thejsx
syntax in<script>
. So we need to addlang=jsx
above<script>
to ensure its worked. -
Secondly, the plugin allows you to write
jsx
syntax in the.js
file.
Many times many prople like to write jsx
in the .js
file in the React project.