vite配合react的基本使用

clydee2023-11-07 19:22

介绍

vite是什么

  • vite是一个快速、简单且现代化的前端构建工具。
  • 它是基于rollup和esbuild的。
  • 官网：cn.vitejs.dev/

支持的语言和框架

  • vite支持多种前端框架，包括Vue.js、React、Preact等，并能够直接运行TypeScript、JavaScript、CSS、lESS等多种语言。
  • vite1.0与vue强绑定，vite2.0开始与框架无关，目前最新的是4.5.0

vite的优势

  • 上手非常简单，开箱即用，常用的功能都封装好了
  • 开发环境项目启动超快（依赖esbuild）
  • 社区成本低（因为基于rollup，所以rollup的插件基本都兼容）

esbuild和rollup简介

esbuild

  • 使用esbuild打包react项目
css 复制代码 
// 内置jsx解析
npm i esbuild
npx esbuild index.jsx --outfile=dist.js --bundle

rollup

  • 官网：cn.rollupjs.org/
  • rollup默认支持es，不支持commonJS，需要使用插件来支持
  • 专注于模块打包， 常用于第三方类库的打包
  • 使用rollup打包react项目
sql 复制代码 
npm i @babel/preset-react @rollup/plugin-babel @rollup/plugin-commonjs @rollup/plugin-node-resolve rollup
npx rollup -c rollup.config.mjs

相关的其他代码

javascript 复制代码 
// index.html

<!DOCTYPE html>
<html lang="en">
 <head> 
  <meta charset="UTF-8" /> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
  <title>Document</title> 
 </head> 
 <body> 
  <div id="root"></div> 
  <script src="./dist.js"></script>  
 </body>
</html>

====

// index.jsx

import React from "react";
import { render } from "react-dom";
const domContainer = document.getElementById("root");
const App = () => {
    return <h1 onClick={() => alert("hello")}>Hello, world!</h1>;
};

render(React.createElement(App), domContainer);

====

// rollup.config.mjs

import commonjs from "@rollup/plugin-commonjs";
import resolve from "@rollup/plugin-node-resolve";
import babel from "@rollup/plugin-babel";

export default {
  input: "index.jsx",

  plugins: [
    resolve(),
    commonjs(),
    babel({
      presets: ["@babel/preset-react"],
    }),
  ],
  output: {
    file: "dist.js",

    format: "es",

    banner: `var process = {
                env: {
                    NODE_ENV: 'production'
                }
             }`,
  },
};

vite基本使用（react项目举例）

初始化

sql 复制代码 
npm create vite@latest
  • swc: rust重写的类babel的编译工具

安装依赖

bash 复制代码 
cd xxx
npm i

启动

arduino 复制代码 
npm run dev

vite中使用less

直接安装（无需配置less-loader啥的）

css 复制代码 
npm i less

新建less 文件

less 复制代码 
App.less
@bgColor: orange;
.container{
  background-color: @bgColor;
}

使用

arduino 复制代码 
import './App.less'
<div className='container'>xxx</div>

命名空间的使用

ini 复制代码 
App.less ==> App.module.less
====
import styles from './App.module.less'
<div className={styles.container}>hello world</div>

vite中使用less

直接安装（无需配置less-loader啥的）

css 复制代码 
npm i less

新建less 文件

less 复制代码 
App.less
@bgColor: orange;
.container{
  background-color: @bgColor;
}

使用

arduino 复制代码 
import './App.less'
<div className='container'>xxx</div>

命名空间的使用

ini 复制代码 
App.less ==> App.module.less
====
import styles from './App.module.less'
<div className={styles.container}>hello world</div>

vite中使用环境变量

import.meta.env

arduino 复制代码 
console.log('env', import.meta.env)

自定义环境变量

  • 项目根目录新建.env文件
  • 定义VITE_ 开头变量
ini 复制代码 
VITE_CUSTOM_VAE=hello
  • 通过import.meta.env获取
  • 自动区分 .env.development （npm run dev） 和 .env.production (npm run build) 里的变量

vite中的预编译（启动快原因）

  • vite第一次启动时，会把node_module中的包，编译完放到cache 里（node_modules下的.vite），后边用到就直接去cache里取，不再走编译（内置实现了webpack4的cache-loader功能）
  • 需要调试第三方库的代码时，注意先把cache删除，否则不是最新的代码

vite中的插件

vite基于rollup封装的，所以rollup的插件天然支持

vite独有的插件

css 复制代码 
npm i vite-plugin-progress -D
  • vite.config.js中配置
javascript 复制代码 
import progress from 'vite-plugin-progress'
export default {
  plugins: [
    progress()
  ]
}

自己实现一个基本版的vite-mdx-react插件（目的：让mdx文件可以直接当React组件使用）

  • mdx = md+jsx，允许在 Markdown 文档中无缝地插入 JSX 代码
  • 不使用插件的问题
markdown 复制代码 
// hello.mdx

# hello
## world
- 1
- 2
- 3

1. 第一项
2. 第二项
3. 第三项

1***2***3

```javascript
console.log('123')
```

`123`

> 123

这是一个链接 [百度](https://www.baidu.com)

<div onClick={()=> alert(123)}>123</div>

===
import HelloMDX from "./hello.mdx";
<HelloMDX />
  • 解决
    • 新建vite-mdx-react.js
    • 安装依赖
bash 复制代码 
npm i @mdx-js/mdx @rollup/pluginutils -D
  • 编写代码
javascript 复制代码 
// 通过vite插件的用法，我们知道vite的plugin本质上就是一个函数
import { createProcessor } from "@mdx-js/mdx";
import { createFilter } from "@rollup/pluginutils";

export default (options = {}) => {
    return {
        name: 'vite-mdx-react', // 插件名称
        /**
         *  transform： rollup 插件 hooks用来转换代码的
         * @param code 源代码
         * @param id 文件路径相关信息
         */
        transform(code, id){ //
            const {include = /.mdx/, exclude} = options // options: 传入的配置
            const filter = createFilter(include, exclude) // createFilter： 创建一个过滤器，用来确定哪些文件被rollup插件处理
            let result = code
            if(filter(id)){
                const processor = createProcessor() // 创建一个mdx文件的处理器
                result = processor.processSync(code).value // 这个处理器的processSync可以同步把mdx转换为js
            }
            return {
                code: result
            }
        }
    }
}
  • vite.config.js
css 复制代码 
import viteMdxReact from "./vite-mdx-react";
plugins: [react(), viteMdxReact()],

小结

Vite的Github仓库累计获得了超过60k Star，每周的下载量达到了720万次，相比去年增长了4倍。 此外，许多知名项目如Storybook、Angular、Preact、Redwood等都开始采用Vite。

尽管取得了这些成就，但Vite仍面临一些挑战，例如生产构建速度相对较慢、开发和生产环境之间的一致性问题等。 为了解决这些问题，Vite团队正在研发一个名为Rolldown（它是使用 Rust 开发的 Rollup 替代品）的新打包工具。

总的来说，Vite正在成为继webpack后的又一个基础工具，越来越多的项目都在其之上构建。 对于前端开发者来说，还是非常有必要了解的。

相关推荐
光影少年8 小时前
usemeno和usecallback区别及使用场景
react.js
吕彬-前端12 小时前
使用vite+react+ts+Ant Design开发后台管理项目（二）
前端·react.js·前端框架
小白小白从不日白12 小时前
react hooks--useCallback
前端·react.js·前端框架
恩婧13 小时前
React项目中使用发布订阅模式
前端·react.js·前端框架·发布订阅模式
程序员小杨v114 小时前
如何使用 React Compiler – 完整指南
前端·react.js
谢尔登15 小时前
Babel
前端·react.js·node.js
卸任15 小时前
使用高阶组件封装路由拦截逻辑
前端·react.js
清汤饺子17 小时前
实践指南之网页转PDF
前端·javascript·react.js
霸气小男18 小时前
react + antDesign封装图片预览组件（支持多张图片）
前端·react.js
小白小白从不日白18 小时前
react 组件通讯
前端·react.js
热门推荐
01软件工程从理论到实践客观题汇总(头歌第一章至第八章)02RAG 实践- Ollama+RagFlow 部署本地知识库032024年高教社杯数学建模国赛C题超详细解题思路分析04【halcon】halcon字符识别——OCR05组基轨迹建模 GBTM的介绍与实现（Stata 或 R）06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提072024年网络安全比赛--系统渗透测试（超详细）08苍穹外卖面试总结09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文10分享几个惊艳的 Three.js 个人站点