MacBook Pro(M1芯片)配置前端开发环境

1,693 阅读4分钟

对于m1的购买,我甚是忧心,毕竟是苹果推出不到一年的自研芯片,一直担心兼容性问题,想等明年m2出来再入手。但由于手上的 windows 电脑出现了各种问题,不再满足我的需求,迫切之下也等不急10月中旬的mac新品了,于是9月底在官网下单了。拿到手之后,第一件事当然是搭建前端开发的一系列环境了。

1. 安装 Xcode

Xcode 是运行在操作系统Mac OS X上的集成开发工具(IDE),它是开发 macOS 和 iOS 应用程序的最快捷的方式。Xcode 具有统一的用户界面设计,编码、测试、调试都在一个简单的窗口内完成。可以直接在 App Store 中安装 Xcode,另外 Xcode 自带了git环境,关于git的具体配置我们将在文章后续中讲到。

2. 安装 Homebrew

对于mac新手而言,这玩意儿一定要安装!简直是mac的必备神器,它是mac的包管理器,就好比Linux的yum。使用 homebrew 的好处就是省去了诸如版本查询、下载、解压、安装等一系列繁琐的步骤,安装的时候直接使用命令行即可,简洁高效。

Homebrew 默认的是官方的源,但安装比较慢,不做推荐。我们可以选择👇的命令来安装国内的源:

/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"

按住回车后选择1 中科大的源

查看版本号:

brew -v

brew卸载脚本:

/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/HomebrewUninstall.sh)"

3. 使用Homebrew安装nvm

安装命令👇

brew install nvm

安装完成后,还不能直接使用nvm命令,需要做以下配置

选用的文件是 .bash_profile,也可以是 ~/.base_profile。因为考虑到后续node版本原因选用前者

echo "source $(brew --prefix nvm)/nvm.sh" >> .zshrc

修改之后,需要重新定向来源:

. ~/.zshrc

这时,在终端输入

nvm list

之前没有安装 node,则会显示为空

我们可以利用 nvm 来下载/卸载和管理 node

在叙述nvm安装node之前,我来讲下 Homebrew 安装 git

4. 使用Homebrew安装git

对于 git,如果没有使用 Xcode 的话,可以利用 Homebrew 来安装的。 安装命令:

brew install git

git bash 配置

  1. 查看是否配置过:

    cd ~/.ssh
    

    若不能进入该目录,说明未配置

  2. 检查是否配置过git账户:

    git config --list
    

重新配置

  1. 配置账户

    git config --global user.name "account name"   ->用户名,建议拼音或英文
    ​
    git config --global user.email "account email"   ->邮箱地址
    
  2. 生成密钥

    ssh-keygen -t rsa -C "account email" ->同上方邮箱地址
    

连续三次回车即可完成

  1. 完成上述步骤后,在 .ssh 文件夹就会生成 id_rsa(私有密钥)和 id_rsa.pub(公有密钥),查看公有密钥:

    cat ~/.ssh/id_rsa.pub
    

    这时候将生成的公钥复制

  2. 在 github 中添加 SSH KEY

    打开 github ——> setting ——> SSH and GPC keys ——> NEW SSH key,这时候将复制的公钥粘贴进去

测试配置

ssh -T git@github.com

5. 使用nvm安装node

nvm:node版本管理器,允许快速地在同一台设备上进行多个node版本之间切换

注意:node15 以上支持 Arm 版 mac 原生编译, 而低于 15 需要使用Rosetta(通过 Rosetta 2,搭载 Apple 芯片的 Mac 可以使用专为配备 Intel 处理器的 Mac 构建的 App)安装

  1. 对于 node 15 及以上版本,利用nvm直接安装即可

    nvm install v15
    
  2. 安装 15版本以下的,需要先进入 Rosetta shell 环境

    arch -x86_64 zsh
    
  3. 以 node 10.24.1 为例,进行安装

    nvm install v10.24.1
    
  4. 利用 nvm list 来查看 电脑所有 node 版本

    —— nvm list 查看已经安装的版本

    —— nvm list installed 查看已经安装的版本

    —— nvm list available 查看网络可以安装的版本

  5. 全局安装 nrm 管理 npm 源

    nrm:npm源管理器,允许快速地在 npm 源间切换。

    npm -g nrm
    

    列出 npm 可用源

    nrm ls
    

    使用淘宝源

    nrm use taobao
    

拓展

  1. 对于使用 brew 安装的node的卸载

    brew uninstall node
    
  2. 对于官网下载的node的卸载

    sudo rm -rf /usr/local/{bin/{node,npm},lib/node_modules/npm,lib/node,share/man/*/node.*}
    
  3. 删除nvm

    rm -rf ~/.nvm
    

6. 关于nvm其他的一些常用命令

  1. 切换使用指定的版本

    nvm use <version>
    
  2. 列出所有版本

    nvm ls
    
  3. 设置 node 默认版本

    nvm alias default <version> 
    
  4. 卸载 node

    nvm uninstall v10 
    

    如果出现类似以下报错:

    root@istudy:/home/tools/code/bison# nvm uninstall 10.0
    nvm: Cannot uninstall currently-active node version, v10.0.0 (inferred from 10.0).
    

    解决办法:deactive 当前版本

    nvm deactivate
    

这里主要讲述m1容易踩坑的前端环境配置,对于抓包工具、chrome浏览器、postman、fq插件等等的下载安装便不加叙述了。对于哪些软件适配了m1的问题,已有大佬在网站罗列出来,此处提供给大家方便查阅:isapplesiliconready.com/zh

最后

我购买的是macbookpro 13.3英寸 16G 512G的配置,选择的是深空灰,科技感十足,使用流畅度和续航能力都值得夸赞,不得不说m1是真香!对于普通的前端开发,m1已经完全适配了,后续我还会更新关于后端环境的配置。