前端开发环境搭建 - MAC安装 homebrewzsh + oh my zsh 【可选】nvm (Node Version Manager)Node/npmnrm (npm Registry Manager)edp 【可选】

安装 homebrew

中文文档

Homebrew 是一款 Mac OS 平台下的软件包管理工具，拥有安装、卸载、更新、查看、搜索等很多实用的功能。简单的一条指令，就可以实现包管理，而不用你关心各种依赖和文件路径的情况，十分方便快捷。

援引官方的一句话：又提示缺少套件啦？别担心，Homebrew 随时守候。Homebrew —— OS X 不可或缺的套件管理器。

# 查看 homebrew 版本号
brew -v

# 安装
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

zsh + oh my zsh 【可选】

shell 的类型有很多种，linux 下默认的是 bash，虽然 bash 的功能已经很强大，但对于以懒惰为美德的程序员来说，bash 的提示功能不够强大，界面也不够炫，并非理想工具。

而 zsh 的功能极其强大，只是配置过于复杂，起初只有极客才在用。后来，有个穷极无聊的程序员可能是实在看不下去广大猿友一直只能使用单调的 bash, 于是他创建了一个名为 oh-my-zsh 的开源项目…

自此，只需要简单的安装配置，小白程序员们都可以用上高档大气上档次，狂拽炫酷吊炸天的 oh my zsh～

安装 zsh

# 查看当前环境 shell
echo $SHELL

# 查看系统自带哪些 shell
cat /etc/shells

# 安装 zsh（MAC）
brew install zsh

# 将 zsh 设置为默认 shell（MAC）
# 在 /etc/shells 文件中加入： /bin/zsh
# 接着运行
chsh -s /bin/zsh

可以通过echo $SHELL查看当前默认的 shell，如果没有改为/bin/zsh，那么需要重启 shell。

安装 oh-my-zsh

oh-my-zsh 源码是放在 github 上，先确保你的机器上已安装了 git。

# 安装
wget https://github.com/robbyrussell/oh-my-zsh/raw/master/tools/install.sh -O - | sh

# 成功界面
  ____  / /_     ____ ___  __  __   ____  _____/ /_
 / __ / __    / __ `__ / / / /  /_  / / ___/ __ 
/ /_/ / / / /  / / / / / / /_/ /    / /_(__  ) / / /
____/_/ /_/  /_/ /_/ /_/__, /    /___/____/_/ /_/
                        /____/                       ....is now installed!
Please look over the ~/.zshrc file to select plugins, themes, and options.

p.s. Follow us at https://twitter.com/ohmyzsh.

p.p.s. Get stickers and t-shirts at http://shop.planetargon.com.

接下来只需简单的配置，就可以享受 oh-my-zsh 的强大。

主题选择

# 修改主题：
vim ~/.zshrc

# 将 ZSH_THEME 改成你喜欢的，比如 robbyrussell
ZSH_THEME="robbyrussell"

# 更新配置：
source ~/.zshrc

zsh 扩展

在~/.zshrc中找到plugins关键字，就可以自定义启用的插件了，系统默认加载 git。

# 多个插件间空格间隔
plugins=(git zsh-autosuggestions)

一个关于 git 配置的坑儿

初次安装 zsh 的时候，正好新换了一台电脑，遇到一个死活过不去的坎儿。如下：

使用git branch命令查看项目分支时，输出内容不是直接在命令下面展示，而是新打开了一个窗口展示，需要按 q 才能退出回到主界面，感觉很不爽。

当时死活以为是 zsh 这些主题导致的。果断卸载 zsh。后来发现是 git 不同版本的默认表现…

# 更改分支分页配置
git config --global pager.branch false

nvm (Node Version Manager)

在我们的日常开发中经常会遇到这种情况：手上有好几个项目，每个项目的需求不同，进而不同项目必须依赖不同版的 NodeJS 运行环境。如果没有一个合适的工具，这个问题将非常棘手。

nvm 应运而生，nvm 是 Mac 下的 Node 版本管理工具，如果需要管理 Windows 下的 Node，官方推荐使用 nvmw 或 nvm-windows。不过，nvm-windows 并不是 nvm 的简单移植，他们也没有任何关系。但下面介绍的所有命令，都可以在 nvm-windows 中运行。

卸载全局安装的 node/npm

在官网下载的 node 安装包，运行后会自动安装在全局目录，使用过程中经常会遇到一些权限问题，所以推荐按照以下方法卸载全局安装的 node/npm。

首先，打开你 Finder，按 shift+command+G，打开前往文件夹的窗口，分别输入下列目录进去之后删除 node 和 node_modules 相关的文件和文件夹:

• 打开 /usr/local/lib，删除 node 和 node_modules 相关的文件和文件夹；
• 打开 /usr/local/include，删除 node 和 node_modules 相关的文件和文件夹；
• 如果你是使用的 brew install node 安装的 NodeJS，那么你还需要在终端中执行 brew uninstall node 命令来卸载；
• 检查你的个人主文件夹下面的所有的 local、lib 以及 include 文件夹，并且删除所有与 node 和 node_modules 相关的文件以及文件夹；
• 打开 /usr/local/bin 并删除 node 可执行文件；

你可能还需要在你的终端中输入一些额外的指令：

sudo rm /usr/local/bin/npm
sudo rm /usr/local/share/man/man1/node.1
sudo rm /usr/local/lib/dtrace/node.d
sudo rm -rf ~/.npm
sudo rm -rf ~/.node-gyp
sudo rm /opt/local/bin/node
sudo rm /opt/local/include/node
sudo rm -rf /opt/local/lib/node_modules

安装 nvm

首先最重要的是：一定要卸载已安装的 NodeJS，否则会发生冲突。

• nvm-windows

• nvm

拿 Mac 下举例：

# crul：
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash

# 或，Wget:
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash

# 检查 nvm 版本号
nvm -v

Node/npm

简单解释下，nvm、Node、npm 三者的关系：

1. nvm：Nodejs 版本管理工具。

   也就是说：一个 nvm 可以管理很多 Node 版本和 npm 版本。

2. Nodejs：在项目开发时的所需要的代码库

3. npm：Nodejs 包管理工具。

   在安装 Nodejs 的时候，npm 也会跟着一起安装，它是包管理工具，负责管理 Nodejs 中的第三方插件。

安装 Node/npm

所以，如果你安装了 nvm，那么:

# 安装最新版 Node
nvm install node

如果没有安装 nvm，去官网下：Node.js 中文网

nrm (npm Registry Manager)

nrm 是一个 npm 镜像源管理器，允许你快速地在 npm 源间切换。

一般公司内部有自己的私有源。一些项目引用了公司内部的 npm 包，均建议安装 nrm。

# 安装 nrm
npm install -g nrm

# 查看可选源
nrm ls

# 其中，带 * 的是当前使用的源，即我学的私有源。
# * npm -------- https://registry.npmjs.org/
#   yarn ------- https://registry.yarnpkg.com/
#   cnpm ------- http://r.cnpmjs.org/
#   nj --------- https://registry.nodejitsu.com/
#   npmMirror -- https://skimdb.npmjs.com/registry/
#   edunpm ----- http://registry.enpmjs.org/

# 增加源
# 其中 reigstry 为源名，url 为源的路径
nrm add <registry> <url>
# 如，增加taobao的私有源
nrm add taobao https://registry.npm.taobao.org/

# 切换源
nrm use taobao

# 删除源
nrm del <registry>

# 测试相应源的响应时间
nrm test <registry>

edp 【可选】

edp文档介绍

我所在公司目前所有非 react 项目，都依赖 edp 启动。所以…

# 安装 edp 包
npm install -g edp

最后

以上就是乐观跳跳糖为你收集整理的前端开发环境搭建 - MAC安装 homebrewzsh + oh my zsh 【可选】nvm (Node Version Manager)Node/npmnrm (npm Registry Manager)edp 【可选】的全部内容，希望文章能够帮你解决前端开发环境搭建 - MAC安装 homebrewzsh + oh my zsh 【可选】nvm (Node Version Manager)Node/npmnrm (npm Registry Manager)edp 【可选】所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。