全棧開(kāi)發(fā)第一天：從Vite到Express的踩坑實(shí)錄

周三下午，我刪掉了第三個(gè)配置失敗的React項(xiàng)目文件夾。屏幕右下角顯示17:43，Node.js的安裝進(jìn)度條終于走到100%。這是我全棧開(kāi)發(fā)旅程的第一天，目標(biāo)很簡(jiǎn)單：讓React跑在本地，讓Node.js服務(wù)器能響應(yīng)一個(gè)請(qǐng)求。

環(huán)境搭建：工具鏈的軍備競(jìng)賽

現(xiàn)代前端開(kāi)發(fā)的第一步不是寫(xiě)代碼，是安裝工具。我列了清單：Vercel和Render用于部署，MongoDB Atlas和Compass管數(shù)據(jù)庫(kù)，React加Node.js是核心環(huán)境。看起來(lái)五個(gè)勾，實(shí)際花了三小時(shí)。

Node.js的安裝驗(yàn)證了兩次。第一次在Command Prompt輸入node -v，返回空白。重啟電腦后，v20.12.1終于出現(xiàn)。這個(gè)細(xì)節(jié)讓我意識(shí)到：JavaScript離開(kāi)瀏覽器運(yùn)行時(shí)，需要獨(dú)立的環(huán)境支撐。瀏覽器里的JS是沙盒里的寵物，Node.js是放歸野外的版本。

Vite：Create React App的終結(jié)者

創(chuàng)建第一個(gè)React項(xiàng)目時(shí)，我選擇了Vite而非傳統(tǒng)的Create React App。官方文檔的說(shuō)法是"faster and modern"，實(shí)際體驗(yàn)是：初始化耗時(shí)從分鐘級(jí)降到秒級(jí)，熱更新幾乎無(wú)感。

命令行跑完npm create vite@latest，進(jìn)入項(xiàng)目目錄執(zhí)行npm install和npm run dev，localhost:5173彈出默認(rèn)頁(yè)面。這個(gè)過(guò)程沒(méi)有報(bào)錯(cuò)，反而讓我不安——太順利了，一定漏了什么。檢查了三遍package.json，確認(rèn)React 18和Vite 5都在依賴列表里，才繼續(xù)下一步。

本地運(yùn)行的React應(yīng)用截圖留在了文檔里：黑底白字的Vite歡迎頁(yè)，React和TypeScript的logo旋轉(zhuǎn)加載。這是第一天的里程碑，雖然只是個(gè)空殼。

Node.js服務(wù)器：從文件到響應(yīng)

React是前端，Node.js是后端。我創(chuàng)建了一個(gè)server.js文件，寫(xiě)入六行代碼：引入http模塊，創(chuàng)建服務(wù)器，監(jiān)聽(tīng)3000端口。瀏覽器訪問(wèn)localhost:3000，白色頁(yè)面顯示"Hello World"。

這個(gè)瞬間比React頁(yè)面彈出更讓我觸動(dòng)。因?yàn)檫@里涉及完整的請(qǐng)求-響應(yīng)循環(huán)：瀏覽器發(fā)起HTTP請(qǐng)求，Node.js接收、處理、返回?cái)?shù)據(jù)。React只是渲染，Node.js是真的在"服務(wù)"。

為了鞏固，我寫(xiě)了一個(gè)命令行計(jì)算器。支持加減乘除，用process.argv讀取用戶輸入。沒(méi)有圖形界面，黑底白字的交互，但邏輯完整。輸入node calculator.js add 5 3，返回8。這種即時(shí)反饋很適合驗(yàn)證JavaScript基礎(chǔ)——變量、函數(shù)、條件判斷，都在十幾行代碼里跑通。

Express.js：框架的降維打擊

原生Node.js寫(xiě)服務(wù)器是手工打造，Express.js是工業(yè)化生產(chǎn)。我新建文件夾myapp，執(zhí)行npm init生成package.json，再npm install express。node_modules文件夾自動(dòng)膨脹到幾百M(fèi)B，里面藏著Express的依賴樹(shù)。

app.js的代碼比原生版本更短：引入express，創(chuàng)建實(shí)例，定義路由，監(jiān)聽(tīng)端口。但功能更強(qiáng)——路由系統(tǒng)、中間件機(jī)制、HTTP方法封裝，都預(yù)備好了。執(zhí)行成功時(shí)，終端顯示"Server running on port 3000"，和原生Node.js同樣的輸出，底氣卻不同。

這是后端API開(kāi)發(fā)的第一步。接下來(lái)要接數(shù)據(jù)庫(kù)、寫(xiě)接口、做認(rèn)證，但框架的地基已經(jīng)打好。

MongoDB Atlas：云數(shù)據(jù)庫(kù)的第一次連接

本地開(kāi)發(fā)用MongoDB Compass，生產(chǎn)環(huán)境用MongoDB Atlas。我在Atlas創(chuàng)建集群，復(fù)制連接字符串，替換密碼，寫(xiě)入Node.js代碼。連接成功的提示出現(xiàn)后，做了簡(jiǎn)單的CRUD操作：創(chuàng)建文檔、讀取列表、更新字段、刪除記錄。

數(shù)據(jù)庫(kù)操作和之前的計(jì)算器形成對(duì)比。計(jì)算器的數(shù)據(jù)存在內(nèi)存，進(jìn)程結(jié)束就消失；MongoDB的數(shù)據(jù)持久化在云端，可以跨設(shè)備、跨會(huì)話訪問(wèn)。這是"應(yīng)用"和"玩具"的分界線。

第一天的真實(shí)進(jìn)度

回顧七小時(shí)的投入：React環(huán)境就緒但未寫(xiě)業(yè)務(wù)組件，Node.js服務(wù)器跑通但未接數(shù)據(jù)庫(kù)，Express框架啟動(dòng)但未定義API路由，MongoDB連接成功但未設(shè)計(jì)數(shù)據(jù)模型。每個(gè)環(huán)節(jié)都停在"Hello World"級(jí)別，但工具鏈的拼圖已經(jīng)完成。

全棧開(kāi)發(fā)的門(mén)檻不在代碼復(fù)雜度，在配置和整合。Vite隱藏了Webpack的配置地獄，Express封裝了HTTP協(xié)議的繁瑣，Atlas省去了數(shù)據(jù)庫(kù)服務(wù)器的運(yùn)維。這些抽象層讓單人開(kāi)發(fā)成為可能，也讓第一天的我能同時(shí)觸碰前后端和數(shù)據(jù)庫(kù)。

明天的目標(biāo)：讓React調(diào)用Express接口，Express讀寫(xiě)MongoDB，完成第一次全棧數(shù)據(jù)流轉(zhuǎn)。今天的localhost:5173和localhost:3000還是孤島，需要一座橋。