使用 Vite 创建一个 React 项目 ​

从这篇开始，将记录 Vite + React 项目的搭建过程，以及在开发过程中遇到的问题和解决方案，还有就是记录一些相关的知识点。 搭建好的项目，到时候会开源到 GitHub 上，欢迎大家 star ~

项目地址： https://github.com/JacindaTang/vite-react-demo

OK，让我们进入正题吧！

第 1 步 - 使用 create vite@latest 创建项目 ​

npm create vite@latest your-project-name -- --template react

将上述代码中 your-project-name 替换为自己的项目名称

第 2 步 - 配置 src 路径 ​

配置 vite.coinfig.js 文件 ​

这里主要是设置一下 src 的别名，方便后续使用。

• 关键的是 alias 这部分，@ 指向 src 目录。

• plugins 这部分，主要是项目中用到了 @decorator 装饰器语法，所以需要配置 babel 插件。具体可以看 redux ，这是之前写的一篇关于 redux 的归纳文章。

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react({
    babel: {
      plugins: [
        [
          "@babel/plugin-proposal-decorators",
          {
            "legacy": true
          }
        ]
      ]
    }
  })],
  resolve: {
    alias: {
      '@': '/src'
    }
  }
})

配置 jsconfig.json 文件 ​

这里主要是为了 vscode 可以识别 @ 这个别名

• 配置 baseUrl 为 ./，然后 paths 配置 @ 指向 src 目录。

• 配置 experimentalDecorators 为 true，以便支持 decorator 语法。

{
    "compilerOptions": {
        "baseUrl": "./",
        "paths": {
            "@/*": [
                "src/*"
            ]
        },
        "experimentalDecorators": true
    },
}

启动项目 ​

npm run dev