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

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 命令
101442533-27b67c80-38e1-11eb-9ddf-10c77498fede.png
101442539-2b4a0380-38e1-11eb-9223-addc98e8186a.png

结尾

至此,我们的 M1 就已经完成了 git + 各版本 Node + npm 的搭建,完成这部分工作后,前端项目已经可以正常运行,各位买了 M1 Mac 的前端小伙伴又能愉快的干活了。希望本文能够帮助被 M1 的开发环境困扰过的您。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,294评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,493评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,790评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,595评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,718评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,906评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,053评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,797评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,250评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,570评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,711评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,388评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,018评论 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,796评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,023评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,461评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,595评论 2 350

推荐阅读更多精彩内容