M1芯片出來了有一段時間了，各類軟件的兼容性已經跟進的差不多了，迫于 M1 實在太香茂契，我的 M1 Macbook 也于本周到達了我的手上。在花費了兩三個小時搭建完開發(fā)環(huán)境后慨绳，立馬用它開始干活了掉冶。這幾天的感受只有寥寥一語可以概括：太 TM 香了真竖！太強了
作為一個前端開發(fā)者，我可以負責任的說前端開發(fā)的場景 M1 已經可以完全覆蓋厌小，并且體驗非常好恢共。目前我依賴的開發(fā)環(huán)境，并且已經跑在 M1 Mac 上的如下：適配 m1 的 Vscode Insiders 版本 + Node v15(on arm) + Node v14 (on intel) + Nvm + Cocoapods + Xcode + Flutter璧亚√志拢可以看到，大前端這一套是完全能夠覆蓋的癣蟋。
我在 github 的 issue 中經惩赶酰看到有關于 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
若是你已經按上述步驟安裝好了 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 已經安裝好域帐，可以嘗試在命令行中輸入 nvm赘被，你可以看到 nvm 已經正常工作了是整。
安裝 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 架構的含懊，所以不適配 M1 芯片身冬。在這里教大家兩個方法，就能成功安裝上低版本 Node岔乔。
方法一
在終端中酥筝，輸入：
arch -x86_64 zsh
通過這個命令可以讓 shell 運行在Rosetta2下。
之后你可以通過 nvm install v12 來安裝低版本 Node雏门。
在此之后嘿歌，您可以不用在 Rosetta2 中就可以使用安裝的可執(zhí)行文件，也就是說剿配，您可以將 Node v15與其他節(jié)點版本互換使用搅幅。
方法二
方法二就是通過 Rosetta2 來啟動終端，這樣通過 Rosetta2 轉譯到 x86 架構中執(zhí)行安裝呼胚，也一樣可以安裝成功。
- 在 finder 中息裸，點擊應用程序蝇更，并在實用工具中找到終端 (Terminal)
- 右鍵終端沪编，點擊獲取信息
- 選擇 使用Rosetta 打開
- 重啟終端，并執(zhí)行
nvm install v12命令
結尾
至此年扩，我們的 M1 就已經完成了 git + 各版本 Node + npm 的搭建蚁廓，完成這部分工作后，前端項目已經可以正常運行厨幻，各位買了 M1 Mac 的前端小伙伴又能愉快的干活了相嵌。希望本文能夠幫助被 M1 的開發(fā)環(huán)境困擾過的您。
