乐趣区

关于前端:M1芯片Mac搭建前端开发环境

jiezi

M1 芯片进去了有一段时间了，各类软件的兼容性曾经跟进的差不多了，迫于 M1 切实太香，我的 M1 Macbook 也于本周达到了我的手上。在破费了两三个小时搭建完开发环境后，立马用它开始干活了。这几天的感触只有寥寥一语能够概括：太 TM 香了！太强了

作为一个前端开发者，我能够负责任的说前端开发的场景 M1 曾经能够齐全笼罩，并且体验十分好。目前我依赖的开发环境，并且曾经跑在 M1 Mac 上的如下：适配 m1 的 Vscode Insiders 版本 + Node v15(on arm) + Node v14 (on intel) + Nvm + Cocoapods + Xcode + Flutter。能够看到，大前端这一套是齐全可能笼罩的。

我在 github 的 issue 中常常看到有对于 m1 装置环境的问题，为了帮忙不违心翻 issue 的开发者，遂决定写下这篇文章记录前端环境的搭建问题。

我会从以下几个步骤来记录：

  • 装置 Xocde
  • 装置 Homebrew
  • 装置 Nvm
  • 装置 Node
  • 如何装置 v14 及以下的老版本 Node

装置 Xcode

Xcode 是苹果开发者工具，是一个性能十分弱小的 IDE，能够用来开发苹果利用，并且自带了 git 环境, 并且有咱们后续依赖的 Xcode Command line tool , 先进入 app store 中装置 Xcode。装置好之后再进入后续步骤

装置 Homebrew

如果你是一个 mac 老用户，那天然不必我介绍什么是 Homebrew。若是你是一个新用户，那么请你肯定要装置 Homebrew，并应用它来治理 Mac 中的各类环境依赖。通过???? 的命令即可装置 Homebrew

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

在终端中执行如下命令装置 Homebrew，装置 Homebrew 的时候，经常会因为网络问题导致装置失败, 这个问题只能依赖大家自行解决迷信上网了。

装置 Nvm

Nvm 是一个治理 Node 版本的工具，当我的项目多了当前，总会碰到须要切换 Node 环境的时候，所以举荐大家应用 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 的环境变量

装置好 nvm 后，须要将环境变量写入咱们的 shell 配置文件中。

如果你的默认 shell 的 zsh，那么将环境变量命令复制进 .zshrc:

vi ~/.bash_profile

如果不应用 zsh，那么将环境变量复制进 bash 中，通过如下命令创立 bash_profile，并且编辑 bash_profile。

touch ~/.bash_profile
vi ~/.bash_profile

最初将以下环境变量脚本 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

该命令运行完后，会执行很久，编译 node，大家急躁等就好了，大略须要 5-10 分钟，就会提醒装置胜利。再揭示一句，报任何谬误，首先先查看是不是网络问题，例如 443、connect timeout 等，如果是网络问题，倡议迷信上网。

如何装置 v14 及以下的老版本 Node

装置 Node 的局部写的很简略，因为按这个步骤，个别不会出问题。而当你用 nvm 尝试去装置 v14 及以下的 Node 版本时，大概率会报错，而咱们在工作中恰好又可能依赖 v14 及以下的 lts 版本。那么为什么会报错呢？究其原因还是因为低版本的 node 并不是基于 arm64 架构的，所以不适配 M1 芯片。在这里教大家两个办法，就能胜利装置上低版本 Node。

办法一

在终端中，输出：

arch -x86_64 zsh

通过这个命令能够让 shell 运行在 Rosetta2 下。
之后你能够通过 nvm install v12 来装置低版本 Node。
在此之后，您能够不必在 Rosetta2 中就能够应用装置的可执行文件，也就是说，您能够将 Node v15 与其余节点版本调换应用。

办法二

办法二就是通过 Rosetta2 来启动终端，这样通过 Rosetta2 转译到 x86 架构中执行装置，也一样能够装置胜利。

  • 在 finder 中，点击应用程序，并在实用工具中找到终端 (Terminal)
  • 右键终端，点击获取信息
  • 抉择 应用 Rosetta 关上
  • 重启终端，并执行 nvm install v12 命令

结尾

至此，咱们的 M1 就曾经实现了 git + 各版本 Node + npm 的搭建，实现这部分工作后，前端我的项目曾经能够失常运行，各位买了 M1 Mac 的前端小伙伴又能欢快的干活了。心愿本文可能帮忙被 M1 的开发环境困扰过的您。

退出移动版