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后的又一个基础工具，越来越多的项目都在其之上构建。 对于前端开发者来说，还是非常有必要了解的。

相关推荐
FakeOccupational3 小时前
nodejs 020: React语法规则 props和state
前端·javascript·react.js
小牛itbull3 小时前
ReactPress：构建高效、灵活、可扩展的开源发布平台
react.js·开源·reactpress
放逐者-保持本心，方可放逐3 小时前
react 组件应用
开发语言·前端·javascript·react.js·前端框架
曹天骄4 小时前
next中服务端组件共享接口数据
前端·javascript·react.js
小牛itbull8 小时前
ReactPress – An Open-Source Publishing Platform Built with React
前端·react.js·前端框架
贵州晓智信息科技11 小时前
深入理解 React 架构从概览到核心机制
前端·react.js·架构
September_ning13 小时前
JavaScript的展开运算符在React中的应用
javascript·react.js
前端小王hs13 小时前
react-markdown标题样式不生效问题
前端·javascript·react.js·前端框架·前端小王hs
键盘上的蚂蚁-13 小时前
duxapp放弃了redux，在duxapp状态实现方案
前端·javascript·react.js
前端小王hs13 小时前
react-markdown内容宽度溢出和换行不生效问题
前端·javascript·react.js·前端框架·前端小王hs
热门推荐
01聊聊 Python 中的同步原语，为什么有了 GIL 还需要同步原语02【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总03Windows10安装PCL1.14.0及点云配准04C++——超强级病毒代码05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06组基轨迹建模 GBTM的介绍与实现（Stata 或 R）07硬件预取之空间预取08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09Coze扣子平台完整体验和实践（附国内和国际版对比）10【SCS-CN】SCS-CN模型中CN值的确定