深圳网站建设 东莞网站建设百度官方推广

1、安装node.js

这里建议安装nvm多版本管理node.js，想用哪个版本，一条命令即可~
多版本管理node.js

2、安装构建工具

Rollup、esbuild、webpack 和 Vite 四种前端构建工具的对比分析。
在vue那篇文章里面，默认使用的Vite构建工具。

2.1 核心特性

​​Rollup​​ 专注于 ES 模块打包，支持 Tree Shaking，输出代码简洁高效；插件生态较丰富 库/框架开发，生成轻量级、高性能的 JS 库。
​​esbuild​​ 基于 Go 语言，极速构建（快 10-100 倍）；支持 TS/JSX，但功能较基础 快速开发环境，适合预构建和简单任务。
​​webpack​​ 全能型打包工具，支持多种资源（JS/CSS/图片等），生态庞大，配置复杂 复杂应用开发，尤其是企业级项目。
​​Vite​​ 双引擎架构（开发用 esbuild，生产用 Rollup）；基于原生 ESM，按需编译 现代 Web 应用开发，追求极速启动和热更新。

2.2 性能对比​​

​​构建速度​​：
​​esbuild​​ 最快（Go 语言多线程并行），适合开发阶段。
​​Vite​​ 开发模式下冷启动快（跳过打包），生产模式依赖 Rollup。
​​webpack​​ 最慢（需构建完整依赖图），但可通过缓存优化。
​​Rollup​​ 中等速度，适合小型库打包。
​​热更新（HMR）​​：
​​Vite​​ 最快（基于 ESM 按需编译）。
​​webpack​​ 较慢（需重新计算依赖树）。
​​Rollup​​ 需插件支持，原生不支持 HMR。

2.3 适用场景​​

​​Rollup​​ JS 库/框架（如 Vue/React 源码打包），需 Tree Shaking 和干净输出。 多资源类型的大型应用开发。
​​esbuild​​ 开发环境预构建、快速原型开发；作为底层工具（如 Vite 的依赖预构建）。 生产环境复杂优化（如代码分割）。
​​webpack​​ 企业级 SPA、多页面应用；需处理复杂资源或兼容旧浏览器。 对构建速度要求极高的现代项目。
​​Vite​​ 现代框架（Vue/React）项目；追求开发体验和 ESM 原生支持。 需深度定制或旧浏览器兼容的项目。

3、创建应用

这里我们用vite构建工具创建react

npm create vite@latest my-app -- --template react

然后上下选择创建的框架：

​​推荐选择 TypeScript + SWC 或 JavaScript + SWC​​（性能优先，适合大多数现代项目）
某些 Babel 插件（如自定义代码转换）可能无法直接迁移到 SWC。
npm run dev 启动时间：SWC 约 1-2 秒，Babel 约 5-10 秒。
生产构建速度：SWC 通常比 Babel 快 50% 以上。
Babel 是一个 JavaScript 编译器，将ES代码转换成js代码

4、项目启动

 cd react-demopnpm installpnpm run dev

出现下面的说明启动成功：

参考文章

Vue学习001-创建 Vue 应用