Mac-搭建前端环境

说明：本文将介绍如何从零开始搭建前端开发环境

验证

确保电脑环境干净，处于未安装node和npm状态

终端命令行输入：

node -v
//command not found

npm -v
//command not found

卸载

终端命令行输入：

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

本地清除原有缓存

终端命令行输入：

1
2
3

npm cache verify           # 清除npm本地缓存
npm cache clean —force.    # 清除npm本地缓存
yarn cache clean           # yarn 清除缓存

下面正式开始搭建前端开发环境👇👇👇

安装环境：

一、下载安装Xcode

链接: https://pan.baidu.com/s/1SB2IlBAlikQEBOCKTn2AUA

密码: 2um7

二、安装CommandLineTools

终端命令行输入：

1	xcode-select --install

注意事项：
*如果报不能安装该软件，则可以去https://developer.apple.com/download/more/开发者网站下载相应版本的CommandLineTools工具*

三、安装homebrew

1
2
3

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
# 如果下载速度太慢或下载失败，可以使用下面的gitee的镜像地址
/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"

四、安装ohmyz：

了解更多可查看https://ohmyz.sh/

终端命令行输入：

1	sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

设置主题：

终端命令行输入：

vim ~/.zshrc
i    											# 编辑修改
修改：ZSH_THEME="robbyrussell"     # 默认使用的主题叫做 robbyrussell
:wq                       # 保存并退出
source ~/.zshrc           # source一下让主题生效

五、安装nvm/n

5.1 nvm安装

——终端命令行输入：

brew install nvm           # 安装最近的稳定版本
vi ~/.bash_profile         # 配置nvm环境变量
i    											 # 编辑修改
输入以下内容：
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"

:wq                        # 保存并退出
source ~/.bash_profile
# 如果使用zsh，则需要将source ~/.bash_profile放到.zshrc中
# 然后运行以下命令
source ~/.zshrc

5.2 n安装

——终端命令行输入：

1 2	npm i n -g n --version # 查看安装的n版本

注意：如果此时安装失败，提示以下信息

npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules
npm ERR! code EACCES
npm ERR! syscall access
npm ERR! path /usr/local/lib/node_modules
npm ERR! errno -13
npm ERR! Error: EACCES: permission denied, access '/usr/local/lib/node_modules'
npm ERR! [Error: EACCES: permission denied, access '/usr/local/lib/node_modules'] {
npm ERR!  errno: -13,
npm ERR!  code: 'EACCES',
npm ERR!  syscall: 'access',
npm ERR!  path: '/usr/local/lib/node_modules'
npm ERR! }
npm ERR! 
npm ERR! The operation was rejected by your operating system.
npm ERR! It is likely you do not have the permissions to access this file as the current user
npm ERR! 
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator.

npm ERR! A complete log of this run can be found in:
npm ERR!   /Users/webuy/.npm/_logs/2021-01-06T05_28_58_654Z-debug.log

这个时候你可以输入sudo npm i xxx -g。但是这样的话，在今后处理一些模块依赖的话，会经常有提示这样的信息。

当然我们也可以采取一些方法避免提示用sudo，终端命令行输入：

1	sudo chown -R $(whoami) $(npm config get prefix)/{lib/node_modules,bin,share}

或者，加上权限，终端命令行输入：

1	sudo chmod -R 777 /usr/local/n

六、安装指定版本node，npm版本随node版本会同步更新

6.1 通过nvm安装

——终端命令行输入：

nvm install node           # 安装最近的稳定版本
nvm install 10.17.0        # 安装指定的版本
nvm ls                     # 列出已安装的node
nvm use 10.17.0            # 使用某个版本的node
nvm alias default 10.17.0  # 设置默认node版本的别名

6.2 通过n安装

——终端命令行输入：

（当10.17.0版本没有安装时，则安装这个版本。如果10.17.0版本已经安装了，则切换的这个node版本。）

n 10.17.0        # 使用或安装指定版本的node 
n latest         # 使用或安装最新的官方发布
n stable         # 使用或安装稳定的官方发布
n lts            # 使用或安装最新的LTS官方版本
n rm 0.9.4 或 n - 0.9.4 # 删除一个node版本
n prune          # 删除除当前版本外所有其他版本

七、安装指定版本yarn

终端命令行输入：

1	npm install -g yarn@1.19.1

八、切换镜像源

查看：npm config get registry

切换：npm config set registry

淘宝镜像源：npm config set registryhttps://registry.npm.taobao.org/

公司镜像源：npm config set registryhttp://XXXX

还原仓库地址：npm config set registryhttps://registry.npmjs.org/

该镜像源下创建npm账号：npm adduser

Username: 输入自己npm账号用户名

Password:输入自己npm账号密码

Email: (this IS public) 输入自己npm账号邮箱

该镜像源下npm账号：npm who am i

该项目有权限的账号：npm owner ls

如果切换未生效，通过安装nrm设置：

九、安装nrm

下载nrm：npm install -g nrm
查看已有的镜像源：nrm ls
添加registry地址：nrm add abc http://XX（“abc”为自定义名称，“http://XX”为目标镜像源)
切换npm registry地址：nrm use jingling

十、检查

1
2
3

node -v          # 检查是否是10.17.0
npm -v           # 检查是否是6.11.3
yarn -v          # 检查是否是1.19.1