web开发环境搭建

装好一个能跑起来的发环前端项目，比背一百遍闭包的境搭建定义都实在。我见过太多人卡在第一步——Node.js版本不对，发环npm install报一堆gyp错误，境搭建然后就开始怀疑自己是发环不是不适合写代码。别急，境搭建这事儿跟天赋没关系，发环纯粹是境搭建环境没配对。

先说你电脑上必须有的发环东西。Node.js，境搭建去官网下LTS版，发环别追最新版。境搭建我去年图新鲜装了v19，发环结果一个老项目里的境搭建node-sass直接编译失败，折腾到凌晨两点才发现是发环版本太新。用nvm管版本最省心，Mac和Linux一条curl命令搞定，Windows用nvm-windows。装完在终端敲node -v和npm -v，有版本号蹦出来就算过了第一关。

包管理器这块，npm够用，但pnpm是真的快。我测过一个中型项目，npm装依赖要48秒，pnpm只要19秒，而且磁盘占用少一半——它用硬链接共享全局存储。不过团队协作时先问一句“你们用啥”，别自己爽了导致lock文件冲突。yarn也行，但现在我默认推荐pnpm，除非项目里有老旧的peer dependency地狱。

编辑器选VS Code，没悬念。装完先干三件事：把自动保存打开（File > Auto Save），装ESLint和Prettier插件，然后在设置里搜format on save打勾。这一步不做，你后面会花大量时间跟同事争论缩进用2空格还是4空格。我见过一个团队因为tab和space混用导致git diff全是红绿块，代码评审根本没法看。

浏览器调试用Chrome DevTools，但别只会console.log。Sources面板里可以给代码打断点，Network面板看请求瀑布图，Application面板查localStorage和cookie。有次我调一个登录态丢失的bug，console.log打了二十行没头绪，打开Application一看，cookie的SameSite属性被后端设成了Strict，跨域请求根本带不上。这种问题靠打印日志永远找不到。

现在说构建工具。Vite已经取代webpack成为新项目首选，启动速度不是一个量级。我手头一个React项目，webpack dev server冷启动12秒，换Vite只要1.3秒。原理是它开发环境用ESM原生加载，不打包。但生产构建还是走Rollup，该配的代码分割、tree shaking一个不少。老项目迁移要谨慎，特别是用了webpack loader处理特殊资源的，Vite的插件生态还没完全覆盖。

最后提一嘴终端。Windows用户别死磕cmd，装个Windows Terminal，配PowerShell 7或者WSL2。WSL2里跑Node比Windows原生快不少，尤其是涉及大量文件IO的操作。我在WSL2里跑npm install比在PowerShell里快将近40%，因为跨文件系统访问的损耗小。Mac用户用iTerm2加zsh，装个oh-my-zsh，但别装太多插件，启动慢得让你想砸键盘。

环境搭好之后，跑一个npm create vite@latest，选React或Vue，cd进去pnpm install，pnpm dev。浏览器打开localhost:5173看到页面转起来，这事就成了。剩下的路由、状态管理、请求库，都是在这个地基上添砖。地基不稳，后面每加一块砖都晃。