开发环境搭建：Node.js、Vite、选型对比与项目初始化

说真的，很多初学者拿到一个实战项目第一反应是「赶紧写代码」。我踩过这个坑——花半小时装完环境直接开干，结果项目跑起来各种报错，最后发现是 Node 版本不对、Vite 配置少了个插件。嗯，磨刀不误砍柴工，先把地基打好。

Node.js — 整个链路的发动机

我们的实时编辑重生成反馈图谱，底层依赖大量异步 I/O 和文件监听。Node.js 的 Event Loop 在这里优势明显。我个人习惯用 nvm（Node Version Manager）管理版本，方便在多个项目间快速切换。

安装 nvm（macOS / Linux）

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

装完重启终端，验证一下：

nvm --version

安装并切换 Node 版本

我建议统一使用 LTS 版本，当前稳定推荐是 18.x：

nvm install 18
nvm use 18
node -v   # 输出 v18.20.0
npm -v    # 输出 10.5.0

Vite — 不只是快

Vite 基于原生 ES Module，开发服务器冷启动几乎秒开。HMR 也是毫秒级。相比之下，Webpack 热更新在项目膨胀后越来越慢，我上一个重构项目就是从 Webpack 切到 Vite，体验直接上了一个台阶。

安装 Vite 脚手架

npm create vite@latest

它会交互式询问项目名、框架、语言。你也可以用一行命令指定模板：

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

这是我个人最常用的方式——加 -- 后面的参数直接跳过问答，适合写脚本或快速初始化。

选型对比：React vs Vue

课程的核心是「实时编辑 + 重生成 + 反馈图谱」，三个关键词决定了技术选型的几个考量点：

• 状态管理复杂度：编辑器内容、图谱节点、撤销重做，需要精细控制。
• 响应式更新粒度：每次编辑可能只改一个小节点，全量渲染会卡死。
• 社区生态：有没有现成的编辑器组件、图谱可视化库。

下面这张表格是我根据实际项目经验做的比选：