使用 Vite 创建 React+TS+SW 项目并整合 AntDesign 、Scss 等组件或插件

前言

记录一下使用 Vite 创建 React+TS+SW 项目并整合 AntDesign 、Scss 等组件或插件。

一、使用 Vite 创建 React+TS+SW 项目

1.新建一个 temp 文件夹

（1）在桌面新建一个 temp 文件夹，然后在 VS Code 中打开此文件夹，打开一个终端；

2.创建一个 Vite 项目工程

（1）具体操作如下：

npm create vite@latest
 
(1) 输入项目名，如： vite-react-ts-scss-ant_design ，然后回车
? Project name: » vite-react-ts-scss-ant_design
 
(2) 选择 React 框架，回车
? Select a framework: » - Use arrow-keys. Return to submit.
    Vanilla
    Vue
>   React
    Preact
    Lit
    Svelte
    Others
 
(3) 选择数据类型，回车
? Select a variant: » - Use arrow-keys. Return to submit.
    TypeScript
>   TypeScript + SWC
    JavaScript
    JavaScript + SWC
 
(4) 创建完成，运行项目
Done. Now run: 
 
  cd vite-react-ts-scss-ant_design
  npm install
  npm run dev

二、解决一下配置问题

（1）找不到模块“vite”。你的意思是要将 \"moduleResolution\" 选项设置为 \"node\"，还是要将别名添加到 \"paths\" 选项中?

（2）找不到模块“path”或其相应的类型声明。（执行 npm i @types/node -D 即可）

（3）未设置 "baseUrl" 时，不允许使用非相对路径。是否忘记了前导 "./"?

（4）解决方法，修改一下 vite.config.js、tsconfig.json、tsconfig.node.json 这三个配置文件即可。

【修改前】

 vite.config.js

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
})

tsconfig.json

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
 
    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
 
    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

tsconfig.node.json

{
  "compilerOptions": {
    "composite": true,
    "skipLibCheck": true,
    "module": "ESNext",
    "moduleResolution": "bundler",
    "allowSyntheticDefaultImports": true
  },
  "include": ["vite.config.ts"]
}

【修改后】

 vite.config.js

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import { resolve } from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': resolve(__dirname, './src'),
    }
  },
})

tsconfig.json

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
 
    /* Bundler mode */
    "moduleResolution": "Node",
    "allowSyntheticDefaultImports": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "baseUrl": ".", // 未设置 "baseUrl" 时，不允许使用非相对路径。是否忘记了前导 "./"?
    "jsx": "react-jsx",
    "paths": {
      "@": ["src"],
      "@/*": ["src/*"]
    },
 
    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

tsconfig.node.json

{
  "compilerOptions": {
    "composite": true,
    "skipLibCheck": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "allowSyntheticDefaultImports": true
  },
  "include": ["vite.config.ts"]
}

三、整合 AntDesign 框架/UI组件库

1.导入依赖

npm i antd -D

2.按需引入

（1）修改 src/App.tsx，如引入 antd 的按钮组件，保存即可在页面看到效果。

import React from 'react'
import { Button } from 'antd'

const App = () => (
  <div className="App">
    <Button type="primary">Button</Button>
  </div>
)

export default App

四、整合 SCSS 插件

1.导入依赖

npm i sass -D
npm i scss -D

2.使用方式

（1）例如对 App.tsx 进行使用，首先修改 App.tsx 文件，然后新建 App.module.scss 文件，将 scss 样式引入 App.tsx 文件即可。

App.tsx

import { Button } from 'antd'
import style from './App.module.scss'

function App() {
  return (
    <>
      <div className={style.appContainer}>
        <div className={style.box}>
          <h1 className={style.welcome}>Vite + React</h1>
          <Button type="primary">Button</Button>
        </div>
      </div>
    </>
  )
}

export default App

App.module.scss

.appContainer {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  text-align: center;

  .box {
    display: inline-table;
    width: 100%;
    height: auto;
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;

    .welcome {
      padding-bottom: 10px;
      color: rgb(0, 255, 115);
      font-weight: normal;
    }
  
    :global(.ant-btn) {
      width: 250px;
    }
  }
}

---

到此项目整合完毕，传送门如下。

vite-react-ts-scss-ant_design: 这是一个基于 Vite 构建的 React + TS 项目，以及整合了 Scss、AntDesign5 等组件或插件。