Vue3 使用 Vite配置JSX/TSX支持

Vue3 使用 Vite配置JSX/TSX支持

开始搭建项目

详情请按Vite官方文档
各位客官们，注意一下搭建项目之前，请使用npm --version检查一下自己的npm版本，按照文档的不同npm版本对应的不同命令行，对号入座～
如果有使用MacOS的同学，可能会遇到一下子问题：

throw new Error(`esbuild: Failed to install correctly
^

Error: esbuild: Failed to install correctly

Make sure you don't have "ignore-scripts" set to true. You can check this with
"npm config get ignore-scripts". If that returns true you can reset it back to
false using "npm config set ignore-scripts false" and then reinstall esbuild.

If you're using npm v7, make sure your package-lock.json file contains either
"lockfileVersion": 1 or the code "hasInstallScript": true. If it doesn't have
either of those, then it is likely the case that a known bug in npm v7 has
corrupted your package-lock.json file. Regenerating your package-lock.json file
should fix this issue.

    at Object.<anonymous> (/Users/chenwenbin/Nutstore Files/TempWorkSpace/first-vue3/node_modules/esbuild/bin/esbuild:2:7)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12)
    at internal/main/run_main_module.js:17:47
failed to load config from /Users/chenwenbin/Nutstore Files/TempWorkSpace/first-vue3/vite.config.js
error when starting dev server:
Error: The service was stopped
    at /Users/chenwenbin/Nutstore Files/TempWorkSpace/first-vue3/node_modules/esbuild/lib/main.js:1212:25
    at /Users/chenwenbin/Nutstore Files/TempWorkSpace/first-vue3/node_modules/esbuild/lib/main.js:609:9
    at Socket.afterClose (/Users/chenwenbin/Nutstore Files/TempWorkSpace/first-vue3/node_modules/esbuild/lib/main.js:587:7)
    at Socket.emit (events.js:327:22)
    at endReadableNT (_stream_readable.js:1327:12)
    at processTicksAndRejections (internal/process/task_queues.js:80:21)

详细解决方法，可参考此篇简书来解决：
starsion：vite安装vue项目报错（Error: esbuild: Failed to install correctly）

项目配置

官方文档指出：

.jsx 和 .tsx 文件同样开箱即用。JSX 的翻译同样是通过 ESBuild，默认为 React 16 形式，React 17 形式的 JSX 在 esbuild 中的支持请看 这里。

而Vue用户需要使用官方提供的@vitejs/plugin-vue-jsx插件。

下载JSX插件

$ npm install @vitejs/plugin-vue-jsx 

配置vite.config.js文件

找到项目根目录，将一下配置放置于vite.config.js文件中：

// vite.config.js
import vueJsx from '@vitejs/plugin-vue-jsx'

export default {
  plugins: [
    vueJsx({
      // options are passed on to @vue/babel-plugin-jsx
    })
  ]
}

vite.config.js文件中有项目搭建时的初始配置，所以我们引入相应的vueJsx插件后，配置完成的配置文件为：

import {
  defineConfig
} from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), vueJsx({
    // options are passed on to @vue/babel-plugin-jsx
  })]
})

JSX文件的写法

正确写法

import { defineComponent } from 'vue'

// named exports w/ variable declaration: ok
// 已被导出的且全部由英语字母组成的变量声明：ok
export const Foo = defineComponent({})

// named exports referencing variable declaration: ok
// 已被导出引用的变量声明：ok
const Bar = defineComponent({ render() { return 
Test
 }})
export { Bar }

// default export call: ok
// 默认导出的： ok
export default defineComponent({ render() { return 
Test
 }})

// default export referencing variable declaration: ok
// 已被导出引用的变量声明：ok
const Baz = defineComponent({ render() { return 
Test
 }})
export default Baz

错误写法

// not using `defineComponent` call
// 没有使用`defineComponent`方法，无法作为组件使用
export const Bar = { ... }

// not exported
// 没有被导出的声明无法作为组件使用
const Foo = defineComponent(...)

测试

在components目录新建一个Test.jsx文件，编写：

// Test.jsx
import { defineComponent } from 'vue'

const Test = defineComponent({
  render() {
    return 
hello, this is jsx featrues support!
  }
})
export { Test }

在根目录的App.vue中引入我们采用jsx语法定义的Test组件：

注意.jsx文件引入时，要写全文件相对路径及其文件名和扩展名。
最后使用npm run dev运行页面时，正常渲染时，即说明项目已获得JSX/TSX支持：

• jsx/tsx 文件中 CSS 样式文件的推荐用法