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

目录
  • 前言
  • 使用 create-vite 脚手架生成基础模板
  • eslint
  • prettier
  • react-router
  • antd
  • 别名
  • Less 与 CSS Module
  • 总结

前言

使用 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

到此这篇关于Vite+React搭建开发构建环境实践的文章就介绍到这了,更多相关React环境搭建内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 快速搭建React的环境步骤详解

    前端生态这几年可谓迎来了大发展,在这个生态圈内,不接受新事物学习新技能,等于堕入魔道. 本文尝试对前端开发利器React,以及构建项目过程中涉及的技术栈进行介绍,以期开启整个构建流程上的思考. 有必要指出的是,要弄明白一件事情的原理,首先要知道它的目的是什么. 1.Nodejs & NPM 为什么要提nodejs呢? 与其说nodejs提供了服务端开发的另一种可能,不如说它彻底改变了整个前端开发的生态.nodejs平台上衍生出了强大的npm.grunt.express等,几乎重新定义了前端的工作

  • React Native搭建iOS开发环境

    一.写在前面 1. 什么是React-Native? React-Native是:Facebook 在2015年初React.js技术研讨大会上公布的一个开源项目.支持用开源的JavaScript库React.js来开发iOS和Android原生App.初期仅支持iOS平台,同年9月份,该开源项目同时支持Android平台. React Native的原理是:在JavaScript中用React抽象操作系统原生的UI组件,代替DOM元素来渲染,比如以<View>取代<div>,以&

  • 详解基于webpack搭建react运行环境

    最近由于项目需要,所以尝试使用webpack搭建react运行环境,在克服了一系列困难后,终于能在页面输出"Hello World",特地把整个过程记录下来,利人利己. 首先我创建了一个文件夹webpack-helloworld-demo,之后的大部分操作都会在这个文件夹下进行. 1.初始化文件夹 npm init //初始化一个package.json文件 git init //产生.git文件,便于之后版本提交回退 2.搭建webpack环境 npm install webpack

  • React Native 环境搭建的教程

    一直对 RN 充满了好奇,前段时间学习并实际使用 RN 来开发了一个简单的应用.第一步从环境搭建开始. 环境搭建 分别需要安装Node,Watchman,Yarn 和 RN 命令行工具,推荐把 react-devtools 的 debug 工具也一并安装了 $ brew install node $ brew install watchman $ brew install yarn $ npm install -g react-native-cli $ npm install -g react-

  • React入门教程之Hello World以及环境搭建详解

    前言 React 是一个用于构建用户界面的 JavaScript 库.react主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图).关注React也已经很久了,一直没能系统地深入学习,最近准备好好研究一下,并且亲自动手做一些实践. 不管是学习一门语言也好,还是学习一个框架也好,都是从最初的hello world程序开始的,今天我们也来用react写一个hello world出来,了解一下如何编写及运行React. 入门教程及环境搭建 在官方文档中,有一种方式是基于npm的,我

  • VSCode搭建React Native环境

    安装 React Native Tools 在插件市场搜索 react 找到 React Native Tools 进行安装: 创建的react-native的工程拖入vscode中 点击F5即可运行react-native 此时可能出现 如下界面,这是因为没有配置运行文件 在debug 页面,点击如下位置,添加configurations 然后点击添加配置,选择debug android 此时点击F5,则可出现如下界面,表示 react-native以运行起来 此时发现断点无法生效,且log的

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

    目录 前言 使用 create-vite 脚手架生成基础模板 eslint prettier react-router antd 别名 Less 与 CSS Module 总结 前言 使用 Vite 已经有两年了,期间使用它开发过单页面应用,也开发过浏览器扩展插件,对比日常工作中用到的 webpack 构建速度大幅提升,开发体验也好很多.虽然相比于 webpack 来说简单了很多,但是仍然有一些配置需要记录一下,以便之后可以快速搭建一个本地开发构建的环境. 使用 create-vite 脚手架生

  • 详解Docker下搭建Jenkins构建环境

    首先需要搭建好docker环境的linux系统,这个教程多如牛毛,在此不再赘述. 然后编写一个dockerfile来生成一个镜像,dockerfile其实就是一系列命令的集合,有点像windows的批处理文件, 搭建Jenkins构建环境需要安装jdk.maven.tomcat.jenkins,另外还安装了GIT,用来构建GIT来源的代码,内容如下: FROM centos:7 # author info MAINTAINER xulijian 514045152@qq.com # instal

  • Electron整合React使用搭建开发环境的步骤详解

    简介 用于构建用户界面的 JavaScript 库 步骤 首先创建React npx create-react-app doc 进入到doc项目 cd doc 安装electron npm install electron --save-dev 安装依赖 判断是否为生产环境 cnpm install electron-is-dev --save-dev 在项目根目录创建main.js const { app ,BrowserWindow } = require('electron') const

  • vite + react +typescript 环境搭建小白入门教程

    目录 前言 1. 使用 vite 创建 react 项目 1. npm / yarn 命令初始化 2. 输入项目名称 3. 选择框架 4. 选择 Js / Ts 5. 项目创建完成 6. 启动项目 2. 规范项目目录 3. 使用 react-router-dom 路由 1. 使用 npm / yarn 命令下载 2. 更改 react-router-dom 版本 3. 修改App.tsx文件 4. 配置 alias 别名 5. 配置 Ant Design 样式库 6. 配置axios与顶部加载进

  • React Native 搭建开发环境的方法步骤

    本文介绍了React Native 搭建开发环境,分享给大家,具体如下: 准备工作 node -v:确认是否安装Node,若已经成功安装了,则执行下面的命令:否则先进行Node的安装. npm install -g create-react-native-app:使用npm快速创建React Native应用. create-react-native-app AwesomeProject:创建名为AwesomeProject的项目. cd AwesomeProject:进入项目所在文件目录. y

  • 教你快速搭建 React Native 开发环境

    React Native 官网地址:https://www.reactnative.cn/docs/environment-setup 开发平台 Windows 目标平台 Android 1.安装依赖 必须安装的依赖有 Node.JDK 和 Android Studio,Node 版本不得低于 14,React Native 需要 JDK 11,查看 JDK 版本的指令如下: javac -version 1-1.下载和安装 android studio 1-2.安装 Android SDK 目

  • Docker容器搭建android编译环境的实践记录

    目录 1 部署容器 1.1 手动部署 1.1.1 配置docker 1.1.2 启动容器 1.1.3 配置环境 1.2 Dockerfile 2 镜像管理 3 容器管理 3.1 每个用户各用容器 3.1.1 服务端配置 3.1.2 客户端使用 3.2 多用户共用容器 3.2.1 服务端配置 3.2.2 客户端使用 1 部署容器 1.1 手动部署 1.1.1 配置docker # 安装之前必须修改docker路径,防止docker空间增长暴满. sudo ln -s /opt/docker /va

  • 从零开始搭建一个react项目开发

    本文介绍了从零开始搭建一个react项目开发,分享给大家,具体如下: 1.npm init 生成 package.json 文件. 2.安装各种需要的依赖: npm install  --save react - 安装React. npm install  --save react-dom 安装React Dom,这个包是用来处理virtual DOM.这里提一下用React Native的话,这里就是安装react-native. npm install  --save-dev webpack

  • 使用Vite+Vue3+TypeScript 搭建开发脚手架的详细过程

    目录 Vite前端开发与构建工具 Vue3 与 Vue2区别 TypeScript 使用Vite创建脚手架 1.创建项目文件夹 2.选择Vue 3.选择TypeScript 4.完成后可以看到项目文件夹(my-vue-app) 配置文件引用别名 alias 修改 vite.config.ts 文件配置(此时:会报错 path 未定义,接下来定义path) 定义path,修改tsconfig.json 安装css处理器插件scss 配置全局scss样式(在src/assets 下创建style 文

  • CentOS 上搭建 PHP7 开发测试环境

    最近公司增加了一台测试用的服务器,当然因为只是测试用,所以决定所有东西都装到一个服务器上,用来我们自己撸代码,发测试版功能,做点小实验神码的,等等等等--反正就是方便用吧,所以自己来试了下搭建一台完全的 LAMP 开发/测试环境,当然同样踩到了无数的坑. 准备开始吧! Step.1 准备服务器 那第一步,我们先搞个服务器吧,搞啥服务器呢,既然是测试用那就搞点不要钱的,或者方便的吧,这里就推荐大家试试用 AWS 或者自己机器上搭建虚拟机,比如 Vagrant 这样的开发平台也是可以的,这里,我们就

随机推荐