你好,我是坚持分享干货的 EarlGrey,翻译出版过《Python编程无师自通》、《Python并行计算手册》等技术书籍。
如果我的分享对你有帮助,请关注我,一起向上进击。
本文为编译文章,原文地址见文末。
React
React 是一个免费开源的前端 JavaScript 库,用于构建基于组件的用户界面。它由 Meta 以及由个人开发者和公司组成的社区负责维护。React 可用于开发单页面、移动或服务器渲染应用程序框架。
Vite
Vite 是一款注重速度和性能的下一代前端工具。它由两大部分组成:
一个开发服务器,与本地 ES 模块相比,它提供了丰富的增强功能;
快速热模块替换(HMR)、预捆绑、支持 typescript、jsx 和动态导入。
Why Vite
Vite 是现代网络项目的快速开发工具。它通过改善开发体验来提高速度和性能。
兼容性说明:
Vite 需要 Node.js 版本 18+. 20+. 但是,某些模板需要更高的 Node.js 版本才能运行,如果您的软件包管理器发出警告,请升级。
具体步骤(React + Vite)
React 与 Vite 是构建快速高效网络应用程序的强大组合。Vite 是一款注重速度和开发体验的构建工具,它利用 ES 模块实现更快的构建。以下是如何使用 Vite 构建 React 项目的基本指南:
创建一个新的 React 项目:
您也可以通过额外的命令行选项直接指定项目名称和要使用的模板。例如,要构建一个 Vite + React 项目,请运行
npm create vite@latest
下一步:
下一步
安装 Vite:设置好 React 项目后,导航到项目目录并安装 Vite:
npm install
为 React 配置 Vite:Vite 已内置了对 React 的支持,因此基本使用时无需任何额外配置。不过,如有需要,您可以在项目根目录下使用 "vite.config.js "文件进行自定义配置。
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
})
修改 package.json 脚本:更新 "package.json "文件中的 "脚本 "部分,以便使用 Vite 进行开发:
{
"name": "react-vite",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/react": "^18.2.55",
"@types/react-dom": "^18.2.19",
"@vitejs/plugin-react": "^4.2.1",
"eslint": "^8.56.0",
"eslint-plugin-react": "^7.33.2",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.5",
"vite": "^5.1.0"
}
}
移动 React 入口文件(可选):
默认情况下,Vite 希望应用程序的入口点是 index.html。如果 React 项目的入口文件是 index.js 或其他文件,则可能需要将其移至 index.html。或者,你也可以配置 Vite 使用不同的入口点。启动开发服务器:
现在,您可以通过运行以下命令来使用 Vite 启动开发服务器:
npm run dev
这将启动本地开发服务器,并启用热模块替换 (HMR),以实现快速开发。
构建项目:准备好为生产构建项目时,可以运行
npm run build
这将在 Dist 目录中生成经过优化的 React 应用程序生产构建。
完成这些步骤后,您就可以用 Vite 设置一个基本的 React 项目,为开发和生产部署做好准备。
原文地址:https://dev.to/vsmentor/build-a-react-component-with-vite-1ifm
- EOF -
文章已经看到这了,别忘了在右下角点个“赞”和“在看”鼓励哦~
推荐阅读 点击标题可跳转
回复下方「关键词」,获取优质资源
回复关键词「 pybook03」,领取进击的Grey与小伙伴一起翻译的《Think Python 2e》电子版
回复关键词「书单02」,领取进击的Grey整理的 10 本 Python 入门书的电子版
👇关注我的公众号👇
告诉你更多细节干货
欢迎围观我的朋友圈
👆每天更新所想所悟