M1芯片出來了有一段時間了，各類軟件的兼容性已經(jīng)跟進的差不多了，迫于 M1 實在太香，我的 M1 Macbook 也于本周到達了我的手上。在花費了兩三個小時搭建完開發(fā)環(huán)境后，立馬用它開始干活了。這幾天的感受只有寥寥一語可以概括：太 TM 香了！太強了
作為一個前端開發(fā)者，我可以負責任的說前端開發(fā)的場景 M1 已經(jīng)可以完全覆蓋，并且體驗非常好。目前我依賴的開發(fā)環(huán)境，并且已經(jīng)跑在 M1 Mac 上的如下：適配 m1 的 Vscode Insiders 版本 + Node v15(on arm) + Node v14 (on intel) + Nvm + Cocoapods + Xcode + Flutter。可以看到，大前端這一套是完全能夠覆蓋的。
我在 github 的 issue 中經(jīng)?？吹接嘘P于 m1 安裝環(huán)境的問題，為了幫助不愿意翻 issue 的開發(fā)者，遂決定寫下這篇文章記錄前端環(huán)境的搭建問題。
我會從以下幾個步驟來記錄：
- 安裝 Xocde
- 安裝 Homebrew
- 安裝 Nvm
- 安裝 Node
- 如何安裝 v14 及以下的老版本 Node
安裝 Xcode
Xcode 是蘋果開發(fā)者工具，是一個功能非常強大的 IDE，可以用來開發(fā)蘋果應用，并且自帶了 git 環(huán)境, 并且有咱們后續(xù)依賴的 Xcode Command line tool , 先進入 app store 中安裝 Xcode。安裝好之后再進入后續(xù)步驟
安裝 Homebrew
如果你是一個 mac 老用戶，那自然不用我介紹什么是 Homebrew。若是你是一個新用戶，那么請你一定要安裝 Homebrew ，并使用它來管理 Mac 中的各類環(huán)境依賴。通過??的命令即可安裝 Homebrew
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
在終端中執(zhí)行如下命令安裝 Homebrew，安裝 Homebrew 的時候，常常會因為網(wǎng)絡問題導致安裝失敗,這個問題只能依賴大家自行解決科學上網(wǎng)了。
安裝 Nvm
Nvm 是一個管理 Node 版本的工具，當項目多了以后，總會碰到需要切換 Node 環(huán)境的時候，所以推薦大家使用 Nvm 來安裝 Node。
Homebrew 安裝 Nvm
若是你已經(jīng)按上述步驟安裝好了 Homebrew，那么你可以直接通過 Homebrew 的命令輕松安裝 Nvm
brew install nvm
curl 安裝 Nvm
若是你不想使用 Homebrew 管理依賴，那么用 ?? 的 curl 直接安裝 Nvm 也是可以的
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | bash
設置 Nvm 的環(huán)境變量
安裝好 nvm 后，需要將環(huán)境變量寫入我們的 shell 配置文件中。
如果你的默認 shell 的 zsh，那么將環(huán)境變量命令復制進 .zshrc:
vi ~/.bash_profile
如果不使用 zsh，那么將環(huán)境變量復制進 bash 中，通過如下命令創(chuàng)建 bash_profile，并且編輯 bash_profile。
touch ~/.bash_profile
vi ~/.bash_profile
最后將以下環(huán)境變量腳本 copy 進 shell 配置文件中：
export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
至此 Nvm 已經(jīng)安裝好，可以嘗試在命令行中輸入 nvm，你可以看到 nvm 已經(jīng)正常工作了。
安裝 Node
接下來我們通過 nvm 來安裝 Node，我們先安裝適配了 M1 的 node 版本。
nvm i v15
該命令運行完后，會執(zhí)行很久，編譯 node ，大家耐心等就好了，大概需要 5-10 分鐘，就會提示安裝成功。再提醒一句，報任何錯誤，首先先檢查是不是網(wǎng)絡問題，例如 443 、 connect timeout 等，如果是網(wǎng)絡問題，建議科學上網(wǎng)。
如何安裝 v14 及以下的老版本 Node
安裝 Node 的部分寫的很簡單，因為按這個步驟，一般不會出問題。而當你用 nvm 嘗試去安裝 v14 及以下的 Node 版本時，大概率會報錯，而我們在工作中恰恰又可能依賴 v14 及以下的 lts 版本。那么為什么會報錯呢？究其原因還是因為低版本的 node 并不是基于 arm64 架構(gòu)的，所以不適配 M1 芯片。在這里教大家兩個方法，就能成功安裝上低版本 Node。
方法一
在終端中，輸入：
arch -x86_64 zsh
通過這個命令可以讓 shell 運行在Rosetta2下。
之后你可以通過 nvm install v12 來安裝低版本 Node。
在此之后，您可以不用在 Rosetta2 中就可以使用安裝的可執(zhí)行文件，也就是說，您可以將 Node v15與其他節(jié)點版本互換使用。
方法二
方法二就是通過 Rosetta2 來啟動終端，這樣通過 Rosetta2 轉(zhuǎn)譯到 x86 架構(gòu)中執(zhí)行安裝，也一樣可以安裝成功。
- 在 finder 中，點擊應用程序，并在實用工具中找到終端 (Terminal)
- 右鍵終端，點擊獲取信息
- 選擇 使用Rosetta 打開
- 重啟終端，并執(zhí)行
nvm install v12命令
結(jié)尾
至此，我們的 M1 就已經(jīng)完成了 git + 各版本 Node + npm 的搭建，完成這部分工作后，前端項目已經(jīng)可以正常運行，各位買了 M1 Mac 的前端小伙伴又能愉快的干活了。希望本文能夠幫助被 M1 的開發(fā)環(huán)境困擾過的您。
