在 MacOS/Windows 上配置前端开发环境

在 MacOS/Windows 上配置前端开发环境

准备

MacOS 必要准备

  1. 打开终端shell运行以下命令, 安装Homebrew
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

  1. 安装完成后重启shell

  2. 输入以下命令安装 wget 和 curl

brew install wget curl
  1. ➡ 配置前端开发环境

Windows 必要准备

  1. 开启Linux子系统（在Windows上默认关闭），必须重启

📌 控制面板 > 程序 > 启用或关闭Windows功能 > 打开以下功能

  • Hyper-V
  • 适用于Linux的Windows子系统
  1. 在微软应用商店安装 Windows Terminal 与 Ubuntu

⚠️ 此处不要下载以下带版本后缀的Ubuntu，例如：

  • Ubuntu 22.04 LTS
  • Ubuntu 20.04.4 LTS
  • Ubuntu 18.04.5 LTS
  1. 下载Linux内核更新包，点此下载适用于 x64 计算机的 WSL2 Linux 内核更新包
  2. 以管理员身份 打开 Windows Terminal 并输入命令查看版本
wsl --set-version Ubuntu 2
wsl -l -v

此时若看到以下输出，WSL2安装成功

  NAME      STATE           VERSION
* Ubuntu    Running         2

💡 使用WSL1版本的Linux子系统会导致一些x64二进制文件无法被正确执行

  1. Linux子系统切换为WSL2后，再次打开Windows Terminal，并在标签栏中选择并打开Ubuntu Shell，初次登录需要配置好账号密码

  2. 输入以下命令更新apt包

sudo apt update
sudo apt upgrade
sudo apt autoremove
  1. 安装 wget 与 curl
sudo apt install wget curl
  1. ➡ 配置前端开发环境
  1. (Tips: 通过Linux子系统访问Windows文件系统)

Windows文件系统被挂载在Linux子系统的/mnt目录下，Windows的硬盘盘符在此目录下通过文件夹的形式呈现

cd /mnt    # 切换到 /mnt 目录
ls         # 查看Windows盘符
cd c       # 进入C盘
ls -l      # 查看C盘内容
pwd        # 查看此时路径

💡 由于Linux的文件系统是ext4，而Windows的文件系统是NTFS，因此若通过Linux子系统对Windows文件系统进行大量IO操作很容易导致阻塞。例如通过Linux子系统在Windows文件系统下运行npm install

配置前端开发环境

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

此时nvm不在环境变量中，需要重启shell

  1. 安装 node
nvm ls
nvm install --lts
node --version
npm --version
  1. 切换默认node版本为稳定版
nvm alias default lts/gallium
nvm use lts/gallium
  1. 安装yarn与pnpm包管理器
npm install --global yarn
npm install --global pnpm
  1. 修改镜像源

切换默认镜像源为淘宝源

npm config set registry https://registry.npmmirror.com/
yarn config set registry https://registry.npmmirror.com/
pnpm config set registry https://registry.npmmirror.com/

⚠️ 国内镜像源可能会导致部分包无法安装

镜像源地址说明
淘宝源https://registry.npmmirror.com/国内推荐⭐️
npm官方源https://registry.npmjs.org/npm默认
yarn官方源https://registry.yarnpkg.com/yarn默认
cnpm源http://r.cnpmjs.org/
nj源https://registry.nodejitsu.com/
npmMirror源https://skimdb.npmjs.com/registry/
edunpm源http://registry.enpmjs.org/
腾讯云源http://mirrors.cloud.tencent.com/npm/
字节源https://bnpm.byted.org/

安装zsh（可选）

  1. 安装zsh

macos自带zsh，windows的ubuntu子系统需要先通过以下命令安装zsh

sudo apt install zsh
  1. 切换默认shell到zsh
chsh -s /bin/zsh
/bin/zsh
  1. 安装oh-my-zsh
sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

设置全局Git（可选）

macos与windows的ubuntu子系统都预置了git, 因此无需安装

git config --global credential.helper store
git config --global user.name 你的用户名
git config --global user.password 你的密码
git config --global user.password 你的邮箱