mac OS 配置前端开发环境

概述

本文默认你不是一个一无所知的小白,了解前端基本开发环境、常用的开发工具及基本的电脑操作。

前端基础开发环境比较简单,主要有以下几点:

  • 使用 nvm 管理 node 版本(安装node会自带npm,不推荐使用cnpm)
  • 使用 nrm 管理 npm
  • 根据情况安装使用 yarn

本文档仅适用我自己,仅供您参考可用,如文中有所错漏,欢迎与我交流。

使用本文档之前,默认你没有安装 node 开发环境,如果你已经安装过 node 可使用以下方法卸载:

依次在终端运行以下命令即可:

1
2
3
4
5
6
7
8
9
10
11
sudo npm uninstall npm -g

sudo rm -rf /usr/local/lib/node /usr/local/lib/node_modules /var/db/receipts/org.nodejs.*

sudo rm -rf /usr/local/include/node /Users/$USER/.npm

sudo rm /usr/local/bin/node

sudo rm /usr/local/share/man/man1/node.1

sudo rm /usr/local/lib/dtrace/node.d

NVM 安装

安装命令

打开你的终端,输入以下命令:

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

最新版本的安装命令,你可以点 这里 进行查看

安装过程中可能因为网络原因安装失败,可以多尝试一下。

网络错误安装失败

安装完成后,可以使用 nvm ls 查看时候安装成功。

问题解决
  • 安装完成过后,提示 command not found: nvm 可能是缺少配置文件引起的,

    注意:您的配置文件可能是 .profile.bash_profile.bashrc.zshrc 等,最简单的方法就是把这几个配置文件都配置一份,如果没有,就新建一个。

    打开你的 访达 =》用户 =〉用户文件夹 找到这些配置文件:

配置文件地址

把以下代码(安装完成后提示的最后3行代码)复制进去:

1
2
3
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

image-20210615165232921

完成之后,关闭终端,重新打开终端,输入 nvm ls 查看是否成功。

成功

通过NVM管理node版本

常用命令:

1
2
3
4
5
6
7
8
9
nvm install stable ## 安装最新稳定版 node
nvm install <version> ## 安装指定版本
nvm uninstall <version> ## 删除已安装的指定版本,语法与install类似
nvm use <version> ## 切换使用指定的版本node
nvm ls ## 列出所有安装的版本
nvm ls-remote ## 列出所有远程服务器的版本(官方node version list)
nvm current ## 显示当前的版本
nvm alias <name> <version> ## 给不同的版本号添加别名
nvm unalias <name> ## 删除已定义的别名

更多说明请直接阅读官方文档:NVM

  • 查看目前所有版本 nvm ls-remote 查看长期支持版本。

    image-20210615170914167

  • 可以使用 nvm install lts/fermium 安装长期支持版本。

  • 安装完成后可以使用 nvm alias default 14.17.0 设置 14.17.0 版本为默认版本。

  • 最后使用使用命令 nvm use default 切换到默认版本。

安装 nrm 管理 npm 源

使用以下命令即可:

1
npm install -g nrm
  • 常用命令

    1
    2
    3
    4
    5
    nrm ls                             //查看可选的源。
    nrm use xxx //对应的名字
    nrm add registry http://xxxxxx/ //增加私有源
    nrm del <registry> //删除源
    nrm test npm //速度测试

安装 Yarn

yarn官方提供了安装文档,但是坑太多了,建议使用更加简单的方法:

1
npm install -g yarn

Yarn 使用请直接参考 官方文档