2025年6月20日 星期五

😱 菜鳥日誌:WSL 裡的 npm install 怎麼搞定?(說好的 Vibe Coding 呢?我為了追 AI 夥伴 Claude Code 拼了!)


哈囉!各位跟我一樣,正在程式碼世界裡努力探索的未來大神們!

今天想跟大家分享我最近經歷的一場「驚心動魄」的除錯之旅。說真的,這段經歷讓我對「當工程師」這件事有了更深一層的體會:程式碼寫得好不好是一回事,但要先把開發環境搞定,才是關鍵啊!

最近,我迷上了 Vibe Coding 這個概念。簡單來說,就是當你對語法、常用程式碼都很熟悉後,只要腦袋裡想好需求,手就可以流暢地把程式碼寫出來,那種沉浸在編碼節奏裡的感覺,超棒的!我一直想朝著那個境界邁進,希望能達到那種「想到什麼就能寫什麼」的境界。

而為了加速我達到 Vibe Coding 的理想狀態,我最近對 Anthropic 的 Claude Code 超級感興趣!聽說它能幫我們寫程式寫得更快、更聰明,讓開發更像是順著直覺走,簡直是實現 Vibe Coding 的「神器」啊!

於是,我信心滿滿地打開我的 WSL Ubuntu 終端機(就是那個在 Windows 裡跑 Linux 的酷東西),準備把我期待已久的 Claude Code 安裝起來,想著只要裝好,我的 Vibe Coding 之路就此開啟!

🚀 興奮的第一步:說好的流暢開發體驗呢?

我多麼期待著,只要簡單地輸入 npm install 指令,Claude Code 就會自動出現,然後我就能立刻體驗 AI 寫程式的快感,進入 Vibe Coding 的境界了!

我敲下了:

Bash
# 感覺安裝 AI 工具就是這樣吧?
npm install -g claude-code
# 或者,如果是在專案裡面用的話,可能是這樣
npm install claude-code

結果... 螢幕上跳出來的不是「安裝成功」的綠色字樣,而是一堆我看不懂的紅色錯誤訊息... 😨 我說好的 Vibe Coding 呢?怎麼第一個關卡就卡在環境設定上了?

🚨 第一次被打擊:什麼是 EPERM?環境先給你一記下馬威!

我的終端機吐出了一大段錯誤,最顯眼的就是 EPERM: operation not permitted。天啊,這是什麼巫術?

npm warn cleanup Failed to remove some directories [
npm warn cleanup    [
npm warn cleanup      '\\\\?\\UNC\\wsl.localhost\\Ubuntu\\home\\linux-like\\codeDemo\\node_modules',
npm warn cleanup      [Error: EPERM: operation not permitted, rmdir '\\wsl.localhost\Ubuntu\home\linux-like\codeDemo\node_modules\node'] {
npm warn cleanup        errno: -4048,
npm warn cleanup        code: 'EPERM',
npm warn cleanup        syscall: 'rmdir',
npm warn cleanup        path: '\\\\wsl.localhost\\Ubuntu\home\linux-like\codeDemo\\node_modules\\node'
npm warn cleanup      }
npm warn cleanup    ]
npm warn cleanup ]
npm error code 1
npm error path \\wsl.localhost\Ubuntu\home\linux-like\codeDemo\node_modules\node
npm error command failed

我有點慌了。EPERM 聽起來像是「權限不夠」?但我在 WSL 自己的終端機裡操作啊,怎麼會沒權限?而且,那個 \\wsl.localhost 的路徑,怎麼看起來這麼像 Windows 的路徑?

我的初步猜想: 老師們說過,WSL 裡面跑 Linux,外面是 Windows,它們之間可能在檔案權限上會打架!難道這就是傳說中的「跨系統權限衝突」?

我趕緊確認了一下,我的程式碼專案是不是真的放在 WSL 的 Linux 檔案系統裡面(比如 /home/我的名字/我的專案),而不是放在 Windows 的 C 槽,然後從 WSL 去「看」它。確認路徑沒問題後,我試著再跑一次:

Bash
# 我確定我在 WSL 的 /home/linux-like/codeDemo 這個路徑下
cd ~/codeDemo
npm install claude-code # 再次挑戰!這次應該會成功了吧?

🤯 第二次被打擊:什麼!你怎麼跑去 Windows 了?!我的 Vibe Coding 夢搖搖欲墜...

這一次,錯誤訊息雖然變了,但並沒有讓我鬆一口氣,反而更困惑了!它竟然說 npm 試圖去執行 C:\Windows\system32\cmd.exe,還要找一個叫做 C:\Windows\installArchSpecificPackage 的東西!

npm error command C:\Windows\system32\cmd.exe /d /s /c node installArchSpecificPackage
npm error '\\wsl.localhost\Ubuntu\home\linux-like\codeDemo\node_modules\node'
npm error 檔案名稱、目錄名稱或磁碟區標籤語法錯誤。
npm error node:internal/modules/cjs/loader:1408
npm error   throw err;
npm error   ^
npm error
npm error Error: Cannot find module 'C:\Windows\installArchSpecificPackage'

等等!我是在 Linux 終端機裡啊,怎麼會跑去 Windows 執行指令?這就像我點了一份滷肉飯,結果送來一盤義大利麵,還是生義大利麵那種感覺!😱 我想著流暢的 Vibe Coding,結果連個工具都裝不好,這打擊真的有點大!

我的進一步猜想: 難道,我的 WSL 裡面的 nodenpm 指令,其實是 Windows 的版本?而不是 Linux 裡面的版本?這就好像,我在 Linux 裡喊「node」,結果 Windows 的 node 跑出來回應一樣!

為了驗證這個恐怖的想法,我輸入了這幾個指令:

Bash
which node # 檢查 node 指令從哪裡來
which npm  # 檢查 npm 指令從哪裡來
node -v    # 檢查 node 的版本
npm -v     # 檢查 npm 的版本

果然!which nodewhich npm 竟然沒有顯示 /usr/bin/node 這種 Linux 路徑,感覺就是沒找到,或者是找到一個怪怪的路徑!這下我明白了,問題的根源就是出在這裡!原來,我以為的 Vibe Coding,其實需要一個穩固的基底環境才能實現啊!

✨ 絕地反擊:大神推薦的 nvm 登場!我的 Vibe Coding 救星!

為了徹底解決這個混亂,我回想起前輩們提過的一個神器:nvm (Node Version Manager)!它就像一個 Node.js 版本的管家,可以幫我們好好地管理 Node.js 的版本,而且最重要的是,它會把 nodenpm 指令設定正確,讓我們在 WSL 裡使用的就是 WSL 裡安裝的 Node.js。

既然 nvm 指令我原本也沒裝好,那就從頭開始,一步一步來!

  1. 安裝 nvm

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

    安裝完畢後,這裡有個超重要的步驟! 它會提示你要關閉終端機再打開,或者輸入 source ~/.bashrc (如果你是用 Bash 介面,通常是這個) 或 source ~/.zshrc (如果你用的是 Zsh 介面)。這一步超級重要,不然 nvm 指令還是會找不到!

    Bash
    # 根據你用的終端機類型,選一個輸入
    source ~/.bashrc
    # 或者
    source ~/.zshrc
    
  2. 確認 nvm 安裝成功:

    Bash
    nvm --version
    

    如果顯示了一串版本號,那恭喜你!nvm 已經準備好了!

  3. nvm 安裝 Node.js:

    Bash
    nvm install node   # 安裝最新穩定版的 Node.js
    nvm use node       # 讓當前的終端機使用這個版本的 Node.js
    nvm alias default node # 設定成預設值,這樣以後每次開終端機都會自動用它
    
  4. 最後檢查:

    Bash
    which node
    which npm
    node -v
    npm -v
    

    這次,which nodewhich npm 終於顯示了類似 /home/我的名字/.nvm/versions/node/vX.Y.Z/bin/node 這樣 nvm 管理的路徑!太棒了!這才是我要的!

✅ 終於!我的 Claude Code 成功了!Vibe Coding 等我!

搞定了這些,我感覺自己像個解開了謎題的偵探!現在,是時候讓我的 AI 夥伴登場了!

我回到我的專案目錄:

Bash
cd ~/codeDemo
rm -rf node_modules     # 把之前所有可能被弄亂的檔案通通刪掉
rm package-lock.json    # 這個檔案也要一起刪掉,確保乾淨
npm install claude-code # 再次嘗試,這次我感覺穩了!

螢幕上跑出了正常的安裝進度,然後是:

added 12 packages in 6s

11 packages are looking for funding
  run `npm fund` for details

成功了! 雖然最後兩行訊息說有 11 個套件需要資金支持(這是一種鼓勵大家支持開源專案的新提示,跟我之前遇到的錯誤無關,算是個好消息!),但最重要的是,沒有錯誤訊息! 我的 Claude Code 終於成功安裝了!感動!現在,我離 Vibe Coding 的境界又近了一步!

📚 小菜鳥的成長筆記(給跟我一樣的新手們!)

這次為了裝個 AI 工具,竟然經歷了這麼多波折,但我也學到了超多東西!

  1. Vibe Coding 雖然酷,但基礎不能少: 我本以為有了 AI 工具,就能直接進入高效開發。沒想到,第一個關卡卻是基礎的環境配置。這讓我明白,無論多麼炫酷的上層應用,都需要穩固的底層基礎作為支撐。打好基礎,Vibe Coding 才可能真正實現。
  2. WSL 其實有點小脾氣: 它雖然好用,但當它和 Windows 檔案系統「互動」時,有時候會出點小問題。所以,在 WSL 裡面工作時,盡量讓你的專案和相關操作都保持在 WSL 自己的 Linux 檔案系統裡。
  3. nvm 是 Node.js 開發者的必備神器: 如果你發現 nodenpm 怎麼用都不對勁,或者發現自己有不同版本的 Node.js,一定要學會用 nvm。它能把你的 Node.js 環境管理得井井有條,少走很多彎路!
  4. 看懂錯誤訊息很重要: 一開始看到一大堆英文錯誤訊息會很慌,但仔細看,每個錯誤都在告訴你一些線索。像這次的 EPERMcmd.exeCannot find module,它們都指向了不同的問題,幫助我一步步找到真正的根源。
  5. 耐心和不放棄: 寫程式和除錯的過程就像解謎。有時候會很卡,會想放棄,但只要耐心一點,一步步分析,總能找到答案的!這次的經驗讓我更有信心面對未來的 Bug 了!
  6. 感謝開源貢獻者: 我們能用這麼多酷炫的工具,都是因為有許多人無私地分享他們的程式碼。npm 最後的「募資」提示,讓我意識到這些工具背後是有人在努力的,如果未來有能力,我也想支持他們!

總之,這次為了安裝 Claude Code 而經歷的「磨難」,讓我這個菜鳥又成長了一點點!希望我的這段經歷,也能幫到同樣在學習路上奮鬥的各位!