如何基于Vite启动一个React项目

资源

1. vite文档

2. vite github

3. @vitejs/plugin-react-refresh为Vite提供React支持，create-vite-app的React模板默认包含这个插件

开始学习

什么是Vite

Vite，一个基于浏览器原生 ES imports 的开发服务器。利用浏览器去解析 imports，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随起随用。同时不仅有 Vue 文件支持，还搞定了热更新，而且热更新的速度不会随着模块增多而变慢。针对生产环境则可以把同一份代码用 rollup 打。虽然现在还比较粗糙，但这个方向我觉得是有潜力的，做得好可以彻底解决改一行代码等半天热更新的问题。

Vite是法语单词，意思就是'"fast"，读/vit/。(我第一次看见这个词读vai特。。。)

Vite是一个由Vue作者尤雨溪开发的前端开发工具，旨在提高前端开发体验。

简单来说，它想替代Webpack。

Vite支持React吗

目前是支持的，只是还不够成熟(就是有些bug还没有解决)，拿来学习可以，学习时候多踩踩坑也不是坏事。但是不建议用到线上项目中。

如何创建一个基于Vite的React项目

• 创建一个名为my-vite-react的项目 yarn create @vitejs/app my-vite-react --template react
• 打开my-vite-react文件夹 cd my-vite-react
• 安装依赖 yarn
• 启动项目 yarn dev
• 浏览器端打开 http://localhost:3000/，看到下图就表示项目启动成功啦~

my-vite-react文件目录

package.json：从中可以看到，目前默认React版本为17.0.0。

vite.config.js：配置文件。

main.jsx： 入口文件

注意

打开my-vite-react你会发现，如果你用到了jsx，必须要import React from "react";，否则会提示React is not defined。这是因为目前vitejs/app不支持jsx的自动转化，和以前React17的jsx转化是一样的，还是用的React.createElement。对此，作者也解释了:

当然你如果懒得写import React from "react";，在vue.config.js配置jsxInject就可以了，它会自动帮你在jsx文件中插入React，当然如果你文件中已经导入React了，记得自己删掉，因为一个文件里不能有两行import React from "react";，会报错的：

import reactRefresh from "@vitejs/plugin-react-refresh";

export default {
  plugins: [reactRefresh()],
  esbuild: {
    jsxInject: `import React from 'react'`,
  },
};