准备

• 安装好pnpm(7.27.1)
• 安装好vite(v4.1.4)

创建 TS 项目

• win 打开PowerShell依次输入

pnpm create vite
vite-project # 项目名称
Vanilla # JS 项目
Typescript # 使用 ts

• 安装依赖

cd vite-prjoect # 上一步创建的项目
pnpm i # 安装依赖

• 运行项目 【个人喜好】运行时打开浏览器 修改 package.json 的 dev:vite 为 dev:vite --open

pnpm run dev
# 或者
npm run dev

TS 配置支持 JSX/TSX

• 打开tsconfig.jcon

compilerOptions{
    ...
    "jsx":"react"
}

jsx 属性值	说明	版本
presver	不编译tsx	待确认
react-native	不编译tsx，只是修改文件名为*.js	待确认
react	编译，默认"jsxFactory"为"React.createElement",jsxFragmentFactory:"React.Fragment"	React < 17,tsc 待确认
react-jsx	编译，默认"jsxFactory"为"_jsx","jsxImportSource": "react"自动添加使用 import {jsx as _jsx} from 'react/jsx-runtime';	React >=17、tsc > 4.1
react-jsxDev	编译，默认"jsxFactory"为"_jsxDEV",jsxFragmentFactory:"Fragment","jsxImportSource": "react"自动添加使用 import {jsx as _jsx} from 'react/jsx-dev-runtime';	React >=17、tsc > 4.1

Vite 配置使用 JSX/TSX

• 打开 tsconfig.json 默认不编译

compilerOptions{
    ...
    "jsx":"preserve"
}

• 打开 vite.config.js

export default defineConfig({
    ...
    esbuild:{
    ...
        jsx:xxx
    }
}

jsx 属性值	说明	版本
preserve	不编译tsx	待确认
transform	编译，默认"jsxFactory"为"React.createElement",jsxFragmentFactory:"React.Fragment"	React < 17,tsc 待确认
automatic	使用jsx-runtime编译，默认"jsxFactory"为"_jsx","jsxImportSource": "react"自动添加使用 import {jsx as _jsx} from 'react/jsx-runtime';	React >=17、tsc > 4.1
automatic	使用jsx-dev-runtime编译，默认"jsxFactory"为"_jsxDEV",jsxFragmentFactory:"Fragment","jsxImportSource": "react"自动添加使用 import {jsx as _jsx} from 'react/jsx-dev-runtime';	React >=17、tsc > 4.1

esbuild 配置使用 JSX/TSX

基本同上面 Vite,配置直接用 esbuild内属性