Vite+React搭建开发构建环境实践记录.docx

第

Vite+React搭建开发构建环境实践记录

目录前言使用create-vite脚手架生成基础模板eslintprettierreact-routerantd别名Less与CSSModule总结

前言

使用Vite已经有两年了，期间使用它开发过单页面应用，也开发过浏览器扩展插件，对比日常工作中用到的webpack构建速度大幅提升，开发体验也好很多。

虽然相比于webpack来说简单了很多，但是仍然有一些配置需要记录一下，以便之后可以快速搭建一个本地开发构建的环境。

使用create-vite脚手架生成基础模板

运行命令安装脚手架

yarncreatevite

我在安装时提供的命令行选项那里，选择了React+TypeScript。

使用下面的命令启动项目

yarndev

此时的项目已经默认集成了@vitejs/plugin-react这个插件。

到这一步其实就已经基本结束了，自动集成HMR，jsx，ts，cssmodule，资源打包等一系列功能。

相比于webpack，简直不要太友好。

eslint

先安装eslint：

yarnaddeslint-D

然后初始化eslint配置：

yarneslint--init

选择选项后，我自己安装的库大致是：

eslint-plugin-react@latest

eslint-config-standard-with-typescript@latest

@typescript-eslint/eslint-plugin@^5.0.0

eslint@^8.0.1

eslint-plugin-import@^2.25.2

eslint-plugin-n@^15.0.0

eslint-plugin-promise@^6.0.0

typescript@*//这个可以移除

之后有两个方案：

方案一，使用vite-plugin-eslint，这个会在报错时在页面上显示报错信息。方案二，使用VSCode的ESlint插件去使用ESLint，这个是在代码上出现红线报错。（个人更喜欢这种）

方案二直接用插件即可，方案一需要安装一下库：

yarnaddvite-plugin-eslint-D

安装完毕后，在vite.config.ts中配置：

//...

importeslintfromvite-plugin-eslint;

exportdefaultdefineConfig({

plugins:[react(),eslint()],

//...

});

无论方案一还是方案二，此时仍会报错，因为ESLint无法解析ts代码，所以还需要安装@typescript-eslint/parser

yarnadd@typescript-eslint/parser-D

最后你还需要在.eslintrc.json加上这行配置：

parserOptions:{

//...

project:tsconfig.json

基本完毕。

为什么说是基本？因为eslint配置还是更多跟代码习惯有关，比如单双引号的使用之类的，所以刚配置完一般都一堆报错，还需要自己去慢慢调整。

而且还涉及到与prettier的配置相冲突的问题,eslint和prettier的配置分别是代码校验和代码格式化时的规则，所以也是要保证规则一致的。

手动调整规则太繁琐了,一般使用eslint-config-prettier禁用掉ESLint中和Prettier配置有冲突的规则,然后用eslint-plugin-prettier保证eslint用prettier的风格校验。

yarnaddeslint-config-prettiereslint-plugin-prettier-D

然后在.eslintrc.json中加上配置:

{

extends:[

//...

plugin:prettier/recommended

另外根据需要一般常用的配置列一下：

{

rules:{

react/react-in-jsx-scope:off,//使用jsx时不需要引用React

@typescript-eslint/strict-boolean-expressions:off//表达式中的布尔值必须严格是布尔类型

pr