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

淼宇心柔 發表於 2022-9-15 09:09:00

<h2 id="前言">前言</h2>
使用 Vite 已经有两年了，期间使用它开发过单页面应用，也开发过浏览器扩展插件，对比日常工作中用到的 webpack 构建速度大幅提升，开发体验也好很多。 
虽然相比于 webpack 来说简单了很多，但是仍然有一些配置需要记录一下，以便之后可以快速搭建一个本地开发构建的环境。
<h2 id="使用-create-vite-脚手架生成基础模板">使用 create-vite 脚手架生成基础模板</h2>
运行命令安装脚手架
<pre><code>yarn create vite
</code></pre>
我在安装时提供的命令行选项那里，选择了 React + TypeScript。
使用下面的命令启动项目
<pre><code>yarn dev
</code></pre>
此时的项目已经默认集成了 @vitejs/plugin-react 这个插件。
到这一步其实就已经基本结束了，自动集成 HMR，jsx，ts，css module，资源打包等一系列功能。
相比于 webpack，简直不要太友好。
<h2 id="eslint">eslint</h2>
先安装 eslint：
<pre><code>yarn add eslint -D
</code></pre>
然后初始化eslint配置：
<pre><code>yarn eslint --init
</code></pre>
选择选项后，我自己安装的库大致是：
<pre><code>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@* // 这个可以移除
</code></pre>
之后有两个方案：
<ul>
<li>方案一，使用vite-plugin-eslint，这个会在报错时在页面上显示报错信息。</li>
<li>方案二，使用 VSCode 的 ESlint 插件去使用 ESLint，这个是在代码上出现红线报错。（个人更喜欢这种）</li>
</ul>
方案二直接用插件即可，方案一需要安装一下库：
<pre><code>yarn add vite-plugin-eslint -D
</code></pre>
安装完毕后，在vite.config.ts中配置：
<pre><code>//...
import eslint from "vite-plugin-eslint";

export default defineConfig({
plugins: ,
//...
});
</code></pre>
无论方案一还是方案二，此时仍会报错，因为 ESLint 无法解析 ts 代码，所以还需要安装 @typescript-eslint/parser
<pre><code>yarn add @typescript-eslint/parser -D
</code></pre>
最后你还需要在.eslintrc.json 加上这行配置：
<pre><code>"parserOptions": {
//...
"project": "tsconfig.json"
},
</code></pre>
基本完毕。
为什么说是基本？因为 eslint 配置还是更多跟代码习惯有关，比如单双引号的使用之类的，所以刚配置完一般都一堆报错，还需要自己去慢慢调整。
而且还涉及到与 prettier 的配置相冲突的问题,eslint 和 prettier 的配置分别是代码校验和代码格式化时的规则，所以也是要保证规则一致的。
手动调整规则太繁琐了,一般使用eslint-config-prettier禁用掉 ESLint 中和 Prettier 配置有冲突的规则,然后用eslint-plugin-prettier保证 eslint 用 prettier 的风格校验。
<pre><code>yarn add eslint-config-prettier eslint-plugin-prettier -D
</code></pre>
然后在.eslintrc.json 中加上配置:
<pre><code>{
"extends": [
 //...
 "plugin:prettier/recommended"
],
}
</code></pre>
另外根据需要一般常用的配置列一下：
<pre><code>{
"rules": {
 "react/react-in-jsx-scope":"off", // 使用 jsx 时不需要引用 React
 "@typescript-eslint/strict-boolean-expressions":"off" // 表达式中的布尔值必须严格是布尔类型
}
}
</code></pre>
这里也可能涉及到对tsconfig.json的修改：
<pre><code>{
"compilerOptions": {
"noImplicitAny":false, // 未声明类型的变量自动默认为any类型
}
}
</code></pre>
这里的配置较多，并且也因人而异，就不一一赘述了。
只要保持团队内部代码风格统一，就算是不符合标准规范的代码，其实也是好代码。
<h2 id="prettier">prettier</h2>
安装
<pre><code>yarn add prettier -D
</code></pre>
根目录下新建.prettierrc 配置文件,然后给个我自己用的配置方案:
<pre><code>{
printWidth: 100,
tabWidth: 4,
useTabs: false,
singleQuote: true,
jsxSingleQuote: false,
endOfLine: 'lf'
}
</code></pre>
一般这个配合 VSCode 的 Prettier 插件和保存时格式化即可。
另外，对于 lf 和 crlf 的处理，保存时没法切换，需要在 VSCode 中设置。
<h2 id="react-router">react-router</h2>
安装：
<pre><code>yarn add react-router-dom
</code></pre>
然后修改 main.tsx 中的代码吧：
<pre><code>//...
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>
);
</code></pre>
这里我将路由相关代码放在了单独的路由文件 router.tsx 中：
<pre><code>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;
</code></pre>
<h2 id="antd">antd</h2>
安装命令：
<pre><code>yarn add antd
</code></pre>
然后在主 less 文件中加上代码：
<pre><code>@import 'antd/es/style/themes/default.less';
@import 'antd/dist/antd.less';

@primary-color: #4294ff; // 更换全局主色
</code></pre>
然后还需要更改 vite.config.ts：
<pre><code>//...
export default defineConfig({
//...
css: {
 preprocessorOptions: {
 less: {
 javascriptEnabled: true,
 },
 },
},
});
</code></pre>
<h2 id="别名">别名</h2>
通常我们会使用下面的方式来使用别名：
<pre><code>import reactLogo from "@/assets/react.svg";
</code></pre>
默认情况下，会直接报错，所以我们需要在vite.config.ts进行如下配置：
<pre><code>//...
import path from "path";

export default defineConfig({
//...
resolve: {
 alias: {
 "@": path.resolve(__dirname, "src"),
 },
},
});
</code></pre>
这里因为没有 path 这个依赖库，所以还要运行命令安装：
<pre><code>yarn add path -D
</code></pre>
此时别名功能已经可以正常使用，但是__dirname会报红，需要安装@types/node
<pre><code>yarn add @types/node -D
</code></pre>
这时别名时没有智能提示的，所以还需要在tsconfig.json中，配置：
<pre><code>{
"compilerOptions": {
 //...
 "baseUrl": "./",
 "paths": {
 "@/*": ["src/*"]
 }
},
}
</code></pre>
完毕。
<h2 id="less-与-css-module">Less 与 CSS Module</h2>
Vite 已集成了 CSS Module 功能，但是想要使用 Less 还需要安装 less 这个库。
<pre><code>yarn add less
</code></pre>
最后使用的方式如下：
<pre><code>import styles from "./App.module.less";
</code></pre>
我们可能会用到一些Less全局变量来作为主题之类的，它可能是这样的theme.less：
<pre><code>@primaryColor: #4294ff; // 全局主色
</code></pre>
然后修改vite.config.ts为：
<pre><code>export default defineConfig({
// ...
css: {
preprocessorOptions: {
 less: {
 javascriptEnabled: true,
 additionalData: `@import "${path.resolve(__dirname, 'src/theme.less')}";`,
 },
},
},
});
</code></pre>
这个可以默认给每个less文件都引入这个theme.less。
<h2 id="转换svg">转换svg</h2>
将引入的svg文件转为react组件。
安装库：
<pre><code>yarn add vite-plugin-svgr -D
</code></pre>
然后再vite.config.js中配置一下：
<pre><code>import svgr from 'vite-plugin-svgr'

export default {
// ...
plugins: ,
}
</code></pre>
因为使用了typescript，还需要在vite-env.d.ts中配置一下：
<pre><code class="language-ts">/// <reference types="vite-plugin-svgr/client" />
</code></pre>
最后的使用方法：
<pre><code>import { ReactComponent as Logo } from './logo.svg'
</code></pre>
<h2 id="总结">总结</h2>
暂时就记录这么多吧，后续如果有一些别的功能配置，也会统一记录在这篇博客。
示例代码仓库：vite-react-practice。

</div>
<div id="MySignature" role="contentinfo">
作者：韩子卢
 
出处：https://www.cnblogs.com/vvjiang/
 
本博客文章均为作者原创，转载请注明作者和原文链接。 
来源：https://www.cnblogs.com/vvjiang/p/16693767.html

頁: [1]

琼殿技术论坛's Archiver

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