快速配置 Mac 和 Ubuntu 前端开发环境

Mac OS

如果不想要在各个软件官网下载软件包，就来试试包管理工具Homebrew

Homebrew

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

墙内用户可以替换为国内源：

从替换命令可以认识到，所谓源只是 Git 仓库 Remote URL

中科大的源比较稳定

# 替换 Homebrew
git -C "$(brew --repo)" remote set-url origin https://mirrors.ustc.edu.cn/brew.git

# 替换 Homebrew Core
git -C "$(brew --repo homebrew/core)" remote set-url origin https://mirrors.ustc.edu.cn/homebrew-core.git

# 替换 Homebrew Cask
git -C "$(brew --repo homebrew/cask)" remote set-url origin https://mirrors.ustc.edu.cn/homebrew-cask.git

# 替换 Homebrew-bottles
# 对于 bash 用户：
echo 'export HOMEBREW_BOTTLE_DOMAIN=https://mirrors.ustc.edu.cn/homebrew-bottles' >> ~/.bash_profile
source ~/.bash_profile
# 对于 zsh 用户：
echo 'export HOMEBREW_BOTTLE_DOMAIN=https://mirrors.ustc.edu.cn/homebrew-bottles' >> ~/.zshrc
source ~/.zshrc

安装

安装 node, npm

# 更新数据
brew update

# 安装node
brew install node

# 安装npm
brew install npm

# check
node -v
npm -v

# npm换国内源
npm i nrm -g
nrm use taobao

# update
npm i -g npm
npm i n -g
n lts

安装 yarn


# 安装yarn
brew install yarn

# yarn 换源

yarn global add yrm
yrm use taobao

安装 google-chrome, vim, visual-studio-code ( vscode )

brew cask install google-chrome visual-studio-code
brew install vim

安装等宽字体

brew cask install font-fira-code font-jetbrains-mono

UBUNTU

ubuntu下包管理工具是apt

apt源

ubuntu各个版本源 URL 都不相同，具体百度。

推荐阿里云的源。

安装

安装node

Node官网关于安装的描述直接就是下载二进制包，感觉比较麻烦，直接上apt。

# install nodejs
sudo apt install nodejs
# install npm
sudo apt install npm

# check version
node -v
npm -v

# npm换国内源
sudo npm i nrm -g
nrm use taobao

# upgrade version
sudo npm i npm -g
sudo npm i n -g
sudo n lts

YARN

# install curl
sudo apt install curl

curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -

echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list

sudo apt update && sudo apt install yarn

# 换国内源

sudo yarn global add yrm 

yrm use taobao

如果网络太差，nrm, yrm 都安装不成功，直接执行下方 NPM,YARN 源设置 命令换源。

安装软件

sudo apt install chromium-browser vim
sudo apt install fonts-firacode

google chrome 在 apt 下载不到，不过有chromium可以安装，使用上没有差异感。

visual-studio-code需要去官网下载安装包。不想自行下载可以使用snap安装webstorm （网络不好的不用试了，直接官网下载）。

字体jetbrains-mono也需要官网下载。

相形之下还是Mac方便得多。

NPM,YARN 源设置

包含有国内比较难以下载的包的源

YARN


# YARN
yarn config set registry https://registry.npm.taobao.org --global  && \
yarn config set disturl https://npm.taobao.org/dist --global && \
yarn config set sass_binary_site https://npm.taobao.org/mirrors/node-sass --global  && \
yarn config set electron_mirror https://npm.taobao.org/mirrors/electron/ --global  && \
yarn config set puppeteer_download_host https://npm.taobao.org/mirrors --global  && \
yarn config set chromedriver_cdnurl https://npm.taobao.org/mirrors/chromedriver --global  && \
yarn config set operadriver_cdnurl https://npm.taobao.org/mirrors/operadriver --global  && \
yarn config set phantomjs_cdnurl https://npm.taobao.org/mirrors/phantomjs --global  && \
yarn config set selenium_cdnurl https://npm.taobao.org/mirrors/selenium --global  && \
yarn config set node_inspector_cdnurl https://npm.taobao.org/mirrors/node-inspector --global

NPM


# NPM
npm set registry https://registry.npm.taobao.org && \
npm set disturl https://npm.taobao.org/dist && \
npm set sass_binary_site https://npm.taobao.org/mirrors/node-sass && \
npm set electron_mirror https://npm.taobao.org/mirrors/electron && \
npm set puppeteer_download_host https://npm.taobao.org/mirrors && \
npm set chromedriver_cdnurl https://npm.taobao.org/mirrors/chromedriver && \
npm set operadriver_cdnurl https://npm.taobao.org/mirrors/operadriver && \
npm set phantomjs_cdnurl https://npm.taobao.org/mirrors/phantomjs && \
npm set selenium_cdnurl https://npm.taobao.org/mirrors/selenium && \
npm set node_inspector_cdnurl https://npm.taobao.org/mirrors/node-inspector && \
npm cache clean --force