一站式iMac M4芯片开发环境配置

之前作为主力开发的Macbook Pro已经渐渐跟不上生产力了，20 年买的，到现在已经跟了我快四年了，Intel i7 的芯片已经不行了，存在这么些问题：

同时跑几个项目，编辑器的光标就会开始卡顿，vscode输入一卡一卡的。
发烫严重，只是一两个项目开着就能七八十度的温度，内存占用也在 70%以上，散热声音很大。
哪怕只开一个项目，若同时存在大量网页多开，浏览器甚至能卡死
项目编译速度很慢，我日常是小程序开发，不论是代码的重编译，还是代码上传，速度都很慢。

虽然将就用也能用，但秉持着效率就是生命的原则，以及上班都那么苦了，开发体验再那么差，果断在 11 月 8 号苹果开售新款iMac时入手了，等了一个星期才到，新电脑势必涉及开发环境的配置，本文就讲述下搭载着Appple M4芯片的iMac如何配置前端开发环境，以及在此过程中踩过的一些坑，也算从零到一记录下，一个未开封的电脑经过怎么一系列操作成为趁手的屠龙宝刀。首先新工位镇楼：

我把整体配置思路分为了五个方面，分别是：

基础配置：默认 App 的删除以及基础 App 安装
运行环境配置：Node 的安装
开发软件的安装及配置：开发工具和编辑器的安装
效率工具的安装：一些提高开发效率的工具
高效操作配置：针对 mac 系统提供的能力做一些开发的提效配置

基础配置

新的iMac激活后，系统自带了一堆软件，把用不到的软件都删掉了，诸如库乐队、keynote、Numbers、Page、iMoves。基本把能删的软件都删了，然后把所有系统软件都丢到了启动台的其它分组里，这样启动台就保持了清爽。

我买的是256g存储的，因为之前的macbook买的 512 用了 4 年连一半空间都没用到，所以256g足够我用了，简单看下，未安装任何环境时iMac的存储空间：

应用程序的 600MB 都是强制不能删的，主要是系统数据+macOS 占用了 22G 左右，实际可用的空间在221g。

接下来就是一些基础 App 的安装，这里我主要安装了三个

Tencent Lemon
Google Chrome
Clash X Pro

Tencent Lemon

腾讯出品的一个轻量化的清理软件，免费好用，足够简洁，无广告无打扰，日常可以做些内存的占用清理，软件的卸载，cpu 温度、磁盘占用的监控管理。我觉得挺好用的一个基础 App，放在第一个，毕竟电脑想要用的长久，时长的清理是必须的，就像人一样，需要定期的洗澡来保持干净。

Google Chrome

网页开发调试必备，苹果自带的 safari浏览器对调试并不友好，虽然说浏览网页还不错，以及用来下载Chroem，重要性放在第二。

Clash X Pro

这个链接我就不放了，科学使用工具的前提，能够畅游网络是作为开发的必要条件，此外后面的配置都需要用到健康的网络环境。所以是作为基础 App 的，放到第三个。

以上三个基础 App 安装完就可以进行下一步运行环境配置

基础运行环境的配置

Node 环境安装

现在前端都是工程化的开发，Node 运行环境是必须的，这也是我认为最开始要装的，其次因为要运行老项目，只安装稳定版本的 Node 时不行的，还要安装 nvm，用来管理不同版本的 Node。

这里直接在Node.js 官网安装，官网提供了nvm的安装命令

bash 复制代码

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

打开终端执行这条安装命令，会报错：

csharp 复制代码

You may be on a Mac, and need to install the Xcode Command Line Developer Tools.
If so, run xcode-select --install and try again. If not, please report this!

这是因为iMac没有预装Xcode Command Line Tools，它是 macOS 上很多开发工具的依赖项，包括 curl、git 和编译工具。所以想要能执行curl命令需要先安装xcode，顺带说一嘴，xcode是自带git的，在macOS是不需要额外安装git的。

安装 Xcode Command Line Tools

有两种方式安装

直接在终端中输入git，因为没安装xcode，所以系统会弹出一个对话框，提示是否要安装命令行工具。点击"安装"。
在终端中执行xcode的安装命令

lua 复制代码

$ xcode-select --install

以上两种方式都可以正常安装xcode，大概几分钟后就安装好了。

检查是否安装成功

在终端中输入以下命令来验证是否已安装好 Xcode Command Line Tools：

csharp 复制代码

xcode-select -p

如果输出一个路径，如 /Library/Developer/CommandLineTools，说明安装成功。

然后我们再运行 curl 安装 nvm就可以安装成功了。

nvm 环境配置

验证 nvm 已正确安装

shell 复制代码

$ command -v nvm

执行这条命令会报错：

bash 复制代码

zsh: command not found: nvm

产生这个问题的原因是终端环境的配置文件没有加载 nvm。解决这个问题需要确保 nvm 正确地在 zsh 中配置。

mac的默认终端是zsh，那我们只需要打开zsh的配置文件.zshrc配置一下就行了，nvm的文档里也提到了这个环境变量的配置。

但是当我执行open ~/.zshrc想修改配置时，却又报错了，终端提示.zshrc not found。

这又是一个坑，iMac M4，家目录下默认没有创建.zshrc配置文件，所以需要手动创建文件并进行配置。

在终端中创建 .zshrc 文件：

bash 复制代码

touch ~/.zshrc

添加 nvm 配置：在文件中添加以下内容：

bash 复制代码

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && . "$NVM_DIR/bash_completion"  # This loads nvm bash_completion (optional)

重新加载 .zshrc 文件：

bash 复制代码

source ~/.zshrc

再次验证 nvm是否安装成功

shell 复制代码

$ command -v nvm
nvm

如果结果输出 nvm 就代表安装成功了

使用 `nvm`安装稳定版本 node

bash 复制代码

# 下载并安装 Node.js（可能需要重启终端）
nvm install 22

# 验证环境中是否存在正确的 Node.js 版本
node -v # 应该打印 `v22.12.0`

# 验证环境中是否存在正确的 npm 版本
npm -v # 应该打印 `10.9.0`

到这里之前都没什么问题，22 版本的 node 很快就安装好了，因为我要跑老项目，需要安装 14 版本的 Node，然后坑就来了，安装低版本 node 时，终端就会持续跑好几分钟，最后显示安装失败，安装 16 版本的 Node 也是如此，我一开始以为是自己安装的nvm有问题，还卸载重装了下，但是也不行，于是我就尝试安装 20 版本的 Node，很快就装好了，这说明nvm是没问题的，所以我就想到了是否是 m4芯片的问题，不支持低版本 node，我心想着要是不支持可完犊子了，公司项目基本都是低版本 Node 跑，好在在nvm的 issue 里找到了该问题的解决方案。

To be clear, it's trying to download darwin arm64, and those don't exist before node 16 - so if you're on an M1/M2 mac, you need to be in a Rosetta shell to install node < 16.

原来这是因为Mac的M系列芯片在安装16版本之前的node时，需要使用 rosetta 终端，那m4的芯片应该也是一个道理，那就开启rosetta终端试下，方法也很简单，我们进入访达，通过⌘ + ⇧ + a进入到应用程序，然后找到实用工具，进去后找到终端 App，选中后执行 ⌘ + i打开终端的简介，这里就能看到开启rosetta终端的选项：