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

  • Vite+React搭建开发构建环境实践已关闭评论
  • 11 次浏览
  • A+
所属分类:Web前端
摘要

使用 Vite 已经有两年了,期间使用它开发过单页面应用,也开发过浏览器扩展插件,对比日常工作中用到的 webpack 构建速度大幅提升,开发体验也好很多。
虽然相比于 webpack 来说简单了很多,但是仍然有一些配置需要记录一下,以便之后可以快速搭建一个本地开发构建的环境。


前言

使用 Vite 已经有两年了,期间使用它开发过单页面应用,也开发过浏览器扩展插件,对比日常工作中用到的 webpack 构建速度大幅提升,开发体验也好很多。
虽然相比于 webpack 来说简单了很多,但是仍然有一些配置需要记录一下,以便之后可以快速搭建一个本地开发构建的环境。

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

运行命令安装脚手架

yarn create vite 

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

使用下面的命令启动项目

yarn dev 

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

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

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

eslint

先安装 eslint

yarn add eslint -D 

然后初始化eslint配置:

yarn eslint --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,这个是在代码上出现红线报错。(个人更喜欢这种)

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

yarn add vite-plugin-eslint -D 

安装完毕后,在vite.config.ts中配置:

//... import eslint from "vite-plugin-eslint";  export default defineConfig({     plugins: [react(), eslint()],     //... }); 

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

yarn add @typescript-eslint/parser -D 

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

"parserOptions": {     //...     "project": "tsconfig.json" }, 

基本完毕。

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

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

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

yarn add eslint-config-prettier eslint-plugin-prettier -D 

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

{     "extends": [         //...         "plugin:prettier/recommended"     ], } 

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

{     "rules": {         "react/react-in-jsx-scope":"off", // 使用 jsx 时不需要引用 React         "@typescript-eslint/strict-boolean-expressions":"off" // 表达式中的布尔值必须严格是布尔类型     } } 

prettier

安装

yarn add prettier -D 

根目录下新建.prettierrc 配置文件,然后给个我自己用的配置方案:

{     printWidth: 100,     tabWidth: 4,     useTabs: false,     singleQuote: true,     jsxSingleQuote: false,     endOfLine: 'lf' } 

一般这个配合 VSCode 的 Prettier 插件和保存时格式化即可。

另外,对于 lf 和 crlf 的处理,保存时没法切换,需要在 VSCode 中设置。

react-router

安装:

yarn add react-router-dom 

然后修改 main.tsx 中的代码吧:

//... import {RouterProvider} from "react-router-dom"; import router from './router';  //... ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(     <React.StrictMode>         <RouterProvider router={router} />     </React.StrictMode> ); 

这里我将路由相关代码放在了单独的路由文件 router.tsx 中:

import { createBrowserRouter } from 'react-router-dom'; import Framework from './Framework'; import Error from './Error'; import Home from '@/pages/home'; import About from '@/pages/about';  const router = createBrowserRouter([     {         path: '/',         element: <Framework />,         errorElement: <Error />,         children: [             {                 path: 'home',                 element: <Home />,             },             {                 path: 'about',                 element: <About />,             },         ],     }, ]);  export default router; 

antd

安装命令:

yarn add antd 

然后在主 less 文件中加上代码:

@import 'antd/es/style/themes/default.less'; @import 'antd/dist/antd.less';  @primary-color: #4294ff; // 更换全局主色 

然后还需要更改 vite.config.ts

//... export default defineConfig({      //...     css: {         preprocessorOptions: {             less: {                 javascriptEnabled: true,             },         },     }, }); 

别名

通常我们会使用下面的方式来使用别名:

import reactLogo from "@/assets/react.svg"; 

默认情况下,会直接报错,所以我们需要在vite.config.ts进行如下配置:

//... import path from "path";  export default defineConfig({     //...     resolve: {         alias: {             "@": path.resolve(__dirname, "src"),         },     }, }); 

这里因为没有 path 这个依赖库,所以还要运行命令安装:

yarn add path -D 

此时别名功能已经可以正常使用,但是__dirname会报红,需要安装@types/node

yarn add @types/node -D 

这时别名时没有智能提示的,所以还需要在tsconfig.json中,配置:

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

完毕。

Less 与 CSS Module

Vite 已集成了 CSS Module 功能,但是想要使用 Less 还需要安装 less 这个库。

yarn add less 

最后使用的方式如下:

import styles from "./App.module.less"; 

总结

暂时就记录这么多吧,后续如果有一些别的功能配置,也会统一记录在这篇博客。

示例代码仓库:vite-react-practice