虽然使用官方脚手架创建项目使用的多点，但也想尝试下使用 vite 创建项目。这里特此记录下。

1、创建 react + ts 项目

// npm 6.x
npm create vite@latest vite-react-ts-demo --template react-ts

// npm 7+
npm create vite@latest vite-react-ts-demo -- --template react-ts

2、创建完成后，安装相关依赖

npm install

3、npm run dev 启动项目发现能正常运行。

4、项目开发相关配置

(1)、安装 postcss-pxtorem、autoprefixer、vite-plugin-compression

具体配置同使用 vite 搭建 vue3+TS 项目及基础配置 (opens new window)中一样

npm install postcss-pxtorem autoprefixer vite-plugin-compression -D

(2)、开启打包后 js、css、图片等文件夹分离。

配置也与在 vue 中配置相同，执行完后可能会报错，[vite:terser] terser not found. Since Vite v3, terser has become an optional dependency. You need to install it. 意思是在 vite v3 中，需要手动安装 terser

npm install terser -D

现在执行 npm run build 进行打包能正常工作了。

(3)、配置 @路径别名

import path from 'path'

resolve: {
  alias: {
    '@': path.resolve(__dirname, 'src')
  }
}

此时可能会报错，找不到模块 “path” 或其相应的类型声明，这是因为 path 模块是 node.js 内置的功能，但是 node.js 本身并不支持 typescript，所以直接在 typescript 项目里使用是不行的

所以需要安装 @types/node 来解决这个问题

npm install @types/node -D

安装完后，警告就消失了

(4)、react-router-dom 安装及配置

npm install react-router-dom

(5)、配置路由管理文件

import { lazy, Suspense, type ReactNode } from 'react'
import { createBrowserRouter } from 'react-router-dom'
const Home=lazy( () => import( '@/Pages/Home' ) )

function LoadingComponent ({children}: {children: ReactNode}) {
	return (
		<Suspense fallback={"加载中"}>{children}</Suspense>
	)
}

const routes=createBrowserRouter( [
  {
    path: '/',
    element: <LoadingComponent><Home /></LoadingComponent>,
    children: [
      {
        path: 'page1',
        element: <LoadingComponent><div>page1</div></LoadingComponent>
      }
    ]
  }
] )

export default routes

在项目入口文件 main.tsx 中引入路由配置文件，并使用它

import React from 'react'
import ReactDOM from 'react-dom/client'
import { RouterProvider } from "react-router-dom"
import router from './router/index'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <RouterProvider router={router}></RouterProvider>
  </React.StrictMode>,
)

现在项目就可以正常运行了。

在路由配置文件中引入组件时，可能会报警告，如找不到某某模块等，这时，可以在 tsconfig.json 文件中增加如下配置

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

这时，警告就消失了。如果依然报警告的话，那就找是否有 tsconfig.app.json 文件，有的话也加入如上配置，警告问题即可解决。

(6)、配置自动按需引入

npm install unplugin-auto-import -D

在 vite.config.ts 配置文件中引入并进行配置

import AutoImport from 'unplugin-auto-import/vite'

plugins: [
	AutoImport( {
		imports: [
			'react',
			{
			  'react-router-dom': [
			  	'createBrowserRouter',
			    'BrowserRouter',
			    'Routes',
			    'Route',
			    'Link',
			    'NavLink',
			    'useNavigate',
			    'useParams',
			    'useSearchParams',
			    'useLocation',
			    'useHistory',
			    'Outlet',
			  ]
			}
		],
		dts: 'src/auto-imports.d.ts', // 自动生成的类型声明文件路径
		eslintrc: {
		  enabled: false,  // 1、改为true用于生成eslint配置。2、生成后改回false，避免重复生成消耗
		}
	})
]

在 tsconfig.json 中的 compilerOptions 字段下增加以下配置

"types": ["./src/auto-imports"]

现在，项目中跟 react 和 react-router-dom 有关的 API 就可以不用手动引入便可以使用了。可能会遇到少数 API 不会自动导入，这时候手动引入一下就可以了

(7)、配置 prettier 以实现代码格式化。

由于 vite 创建的项目默认是带有 eslint 的，然而 eslint 是用于运行代码质量检查的，并不会对代码进行格式化，因此需要 prettier
(1)、安装格式化工具，prettier 和相应的 eslint 插件

npm install prettier eslint-plugin-prettier eslint-config-prettier -D

(2)、在.eslintrc.js 或.eslintrc.cjs 或相应的 eslint 配置文件中，启用 prettier 插件

module.exports = {
  // ...
  plugins: ['prettier'],
  rules: {
    // 确保你的规则配置中使用了 prettier 插件
    'prettier/prettier': 'error',
  },
  // ...
};

(3)、在 package.json 中添加一条脚本命令用来格式化代码

{
	"scripts": {
		"format": "eslint --fix src"
	}
}