Configuring the Web Development Environment
Prepare your dev env in MacOS/Windows
在 MacOS/Windows 上配置前端开发环境
在 MacOS/Windows 上配置前端开发环境
- MacOS用户 ➡ MacOS必要准备
- Windows用户 ➡ Windows必要准备
准备
MacOS 必要准备
- 打开终端shell运行以下命令, 安装Homebrew
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
安装完成后重启shell
输入以下命令安装
wget
和curl
brew install wget curl
Windows 必要准备
- 开启Linux子系统(在Windows上默认关闭),必须重启
📌
控制面板
>程序
>启用或关闭Windows功能
> 打开以下功能
- Hyper-V
- 适用于Linux的Windows子系统
- 在微软应用商店安装
Windows Terminal
与Ubuntu
⚠️ 此处不要下载以下带版本后缀的Ubuntu,例如:
- Ubuntu 22.04 LTS
- Ubuntu 20.04.4 LTS
- Ubuntu 18.04.5 LTS
- 下载Linux内核更新包,点此下载适用于 x64 计算机的 WSL2 Linux 内核更新包
- 以管理员身份 打开
Windows Terminal
并输入命令查看版本
wsl --set-version Ubuntu 2
wsl -l -v
此时若看到以下输出,WSL2安装成功
NAME STATE VERSION
* Ubuntu Running 2
💡 使用WSL1版本的Linux子系统会导致一些x64二进制文件无法被正确执行
Linux子系统切换为WSL2后,再次打开Windows Terminal,并在标签栏中选择并打开Ubuntu Shell,初次登录需要配置好账号密码
输入以下命令更新apt包
sudo apt update
sudo apt upgrade
sudo apt autoremove
- 安装
wget
与curl
sudo apt install wget curl
- (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
配置前端开发环境
- 安装
nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
此时nvm不在环境变量中,需要重启shell
- 安装
node
nvm ls
nvm install --lts
node --version
npm --version
- 切换默认node版本为稳定版
nvm alias default lts/gallium
nvm use lts/gallium
- 安装yarn与pnpm包管理器
npm install --global yarn
npm install --global pnpm
- 修改镜像源
切换默认镜像源为淘宝源
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(可选)
- 安装zsh
macos自带zsh,windows的ubuntu子系统需要先通过以下命令安装zsh
sudo apt install zsh
- 切换默认shell到zsh
chsh -s /bin/zsh
/bin/zsh
- 安装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 你的邮箱
- 准备
- MacOS 必要准备
- Windows 必要准备
- 配置前端开发环境
- 安装zsh(可选)
- 设置全局Git(可选)