3.react-web开发环境配置

创建vite项目

npm create vite@latest react-web --template react #选择typescript创建项目
cd react-web
npm install

安装react依赖

npm install --save-dev @types/react @types/react-dom

去除语法检查

在tsconfig.app.json中修改

{
    "noUnusedLocals": false, /* 不检查未使用的变量 */
    "noUnusedParameters": false, /* 不检查未使用的函数参数 */
}

在eslint.config.js中添加

export default tseslint.config(
    rules: {
      "@typescript-eslint/no-explicit-any": "off" //允许使用any
    },
  },
)

调试

浏览器调试

vite.config.ts添加配置

export default defineConfig({
  build: {
    sourcemap: true, // 生产环境也需要，开启sourcemap
  },
  esbuild: {
    sourcemap: true, // 开发环境
  }

执行npm run dev启动服务器，在浏览器打开http://localhost:5173，F12打开开发者工具可以在tsx文件中下断点

本地调试

vite.config.ts添加配置

export default defineConfig({
  build: {
    sourcemap: true, // 生产环境也需要，开启sourcmap
  },
  esbuild: {
    sourcemap: true, // 开发环境
  }

添加.vscode/launch.json文件

{
    "version": "0.2.0",
    "configurations": [
      {
        "type": "chrome",
        "request": "launch",
        "name": "Debug Vite App",
        "url": "http://localhost:5173", //服务器地址
        "webRoot": "/home/px/Code/Clion/react-demo/src", //源代码目录
        "sourceMaps": true,
        "skipFiles": ["node_modules/**"]
      }
    ]
  }

执行npm run dev启动服务器，在vscode按F5开启调试，可以直接在源代码上下断点

单元测试

使用vitest做单元测试

安装vitest依赖

npm install --save-dev vitest @testing-library/react @testing-library/jest-dom

配置vitest

修改vite.config.ts文件

//import { defineConfig } from 'vite' //去除
import { defineConfig } from 'vitest/config' //添加

//添加
export default defineConfig({
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: './testSetup.js',
  }
})

创建testSetup.js文件

import '@testing-library/jest-dom';

创建test文件

在src目录下创建*.test.tsx文件

配置测试脚本

在package.json配置脚本

{
  "scripts": {
    "test": "vitest"
  },

执行测试

npm run test