如何在React中使用Vite构建工具?

 Vite使用 esbuild 预构建依赖。由于esbuild是一个用Go编写的JavaScript(和TypeScript)绑定器,这也是它快速的原因之一。

​​

通常,当用React构建一个新项目时,建议从create-react-app开始。但现在有了Vite,就可以自己轻松地从头创建一个新项目,因为Vite的配置非常简单。

在我们开始之前,需要安装Node.js和NPM(与Node.js捆绑)(如果你还没有安装的话)。在本文中将使用NPM,但如果你喜欢Yarn或PNPM,请随意使用。

打开终端并创建一个新目录:

mkdir react-vite-example

移动到这个目录中:

cd react-vite-example

初始化 npm 项目:

npm init -y

在运行命令之后,应该有个package.json文件在新创建的目录中。

添加此项目所需的基本依赖项:

npm install --save react react-dom

开发依赖关系:

npm install --save-dev vite @vitejs/plugin-react-refresh

(@vitejs/plugin-react-refresh库将用于启用HMR,即热模块替换)

将以下行添加到package.json脚本中:

// /package.json
{
"scripts": {
"dev": "vite",
"build": "vite build",
"serve": "vite preview"
}
}

在项目根目录新建一个文件vite.config.js:

touch vite.config.js

添加以下内容:

// /vite.config.js
import reactRefresh from "@vitejs/plugin-react-refresh";
import vite from "vite";

const config = vite.defineConfig({
plugins: [reactRefresh()],
});

export default config;

默认情况下,Vite 会在你的项目根目录寻找index.html文件。这样便可以确定运行应用程序所需的依赖关系(JS文件,CSS文件,资产等)。

在项目的根目录下创建index.html文件:

touch index.html

添加以下内容:











你可以看到有一个对/src/index的引用。index.html中的JSX文件。这将是React应用程序的JavaScript入口点。

创建/src目录:

mkdir src

创建/src/index.jsx文件:

touch src/index.jsx

添加以下内容:

import React from "react";
import { render } from "react-dom";

render(
Hello World!
, document.getElementById("root"));

由于我们安装的@vitejs/plugin-react-refresh模块,现在你可以在React中创建应用程序,并受益于Vite和HMR的速度。

使用npm run dev命令运行带有HMR的本地服务器。

使用npm run build构建一个生产包,然后可以使用npm run serve来预览它。

生产包将位于/dist目录中,是需要部署到托管平台(如Netlify或Vercel)上的包。

本文是非常基础的,也没有介绍如何使用 CSS 和资产,因为开箱即用的 Vite 已经支持 CSS 模块(如果文件以 .module.css 结尾)和导入图像等资产不需要额外的步骤。

分享题目:如何在React中使用Vite构建工具?
URL地址:http://www.shufengxianlan.com/qtweb/news34/455084.html

网站建设、网络推广公司-创新互联,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有等

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联