1. mkdir vite-react18-demo
    3. cd vite-react-react18-demo
    5. npm init -y
    7. npm install react@alpha react-dom@alpha
    9. npm install vite -D
    11. npm install @vitejs/plugin-react-refresh -D // 启动热更新
    13. npm install typescript @types/react @types/react-dom -D

    package.json文件中添加如下两条命令

    • 启动：”start”: “vite”`
    • 打包：”build”: “tsc && vite build”

    安装完之后，和 Webpack 一样，新建 vite.config.js 配置文件，在 plugins 属性中添加热更新插件即可

    1. import { defineConfig } from 'vite' 
    2. import refreshReactPlugin from '@vitejs/plugin-react-refresh' 
    4. export default defineConfig({     
    5.     plugins: [refreshReactPlugin()] 
    6. })

    package.json 添加如下内容

    1. {
    2.     "compilerOptions": {
    3.         "target": "ESNext",
    4.         "lib": ["DOM", "DOM.Iterable", "ESNext"],
    5.         "allowJs": false,
    6.         "skipLibCheck": false,
    7.         "esModuleInterop": false,
    8.         "allowSyntheticDefaultImports": true,
    9.         "strict": true,
    10.         "forceConsistentCasingInFileNames": true,
    11.         "module": "ESNext",
    12.         "moduleResolution": "Node",
    13.         "resolveJsonModule": true,
    14.         "isolatedModules": true,
    15.         "noEmit": true,
    16.         "jsx": "react",
    17.         "types": ["react/next", "react-dom/next"]
    18.     },
    19.     "include": ["./src"]
    20. }