# 开发环境

对于大多数开发人员而言，搭建一个舒适、稳定，同时具有一致性的本地开发环境，是保证高效工作的重要前提。

目前可供前端开发使用的工具越来越多，合理地使用工具有助于提升开发效率，但种类繁多时选择起来却会让人感觉眼花缭乱。除此之外，开发环境和生产环境不一致，以及不同开发人员的本地环境不一致，都会造成很多意想不到的后果。所以每个开发人员在项目启动之前，首先应该确保项目的开发环境保持一致，同时也要保证开发环境和生产环境的一致性。

这里我们将讲述如何搭建一套标准的 Mac 前端开发环境，包括运行环境、开发工具、版本控制、交互设计等各个工作流程所需的各种软件的安装及配置说明，以此统一前端团队的开发环境，提升开发效率，并能够帮助新人快速融入团队。

Xcode Command Line Tools

命令行工具（CLT）是 Xcode 中的一款工具，为 Mac 终端用户提供了许多常用的工具、实用程序和编译器。

开始前请先检验是否安装了 Xcode 命令行工具。在终端执行 xcode-select --install 命令，如果已经安装，会出现 command line tools are already installed 提示；如果未安装，则根据弹窗提示，点击安装即可。

# 包管理器

Homebrew 是一款 macOS 平台下的软件包管理工具，拥有安装、卸载、更新、查看、搜索等很多实用的功能。

使用 Homebrew 可以轻松获取系统没有预装的软件包，让你的 macOS 更完整。使用以下命令进行安装：

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

安装之后，你就可以在终端访问 brew 命令来管理系统软件：

brew install FORMULA...     # 安装指定软件
brew uninstall FORMULA...   # 卸载指定软件
brew upgrade [FORMULA...]   # 更新指定软件
brew info [FORMULA...]      # 查看指定软件
brew search [TEXT|/REGEX/]  # 搜索指定软件
brew list [FORMULA...]      # 显示已安装软件
brew help [COMMAND]         # 查看帮助说明

# 运行环境

Node.js 是一个基于 Chrome V8 引擎 (opens new window) 的 JavaScript 运行时，当前 LTS 版本：Node 14.16.0 (opens new window)（包含 npm 6.14.11）

Node.js 使用偶数版本作为 LTS（Long-term Support，长期维护支持）版本，有 30 个月的生命周期。生产环境应该仅使用 活跃 LTS（Active LTS）或者是 维护 LTS（Maintenance LTS）版本。

# Node 版本管理器

nvm 是一个 Node 版本管理器，它可以让你在本地安装并维护多个不同的 Node 版本，并方便地进行切换。

使用 brew 命令快速安装：

brew install nvm

或通过执行脚本安装（任选其一）：

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh

安装之后，你就可以使用 nvm 管理多个不同的 Node 版本：

nvm install node            # 安装最新版本
nvm install --lts           # 安装最新 LTS 版本
nvm install <version>       # 安装指定版本
nvm use <version>           # 使用指定版本
nvm alias default <version> # 设置默认版本
nvm current                 # 查看当前版本
nvm ls                      # 查看已安装版本
nvm help                    # 查看帮助说明

# npm 包管理器

npm 是一个 JavaScript 包管理工具，也是目前 Node.js 默认的包管理器，通常在安装 Node.js 时会附带 npm。

不过在某些 Node.js 版本中自带的 npm 版本较低，你可以执行以下命令来升级：

npm install -g npm

Yarn 是由 Facebook、Google、Exponent 和 Tilde 联合推出的新一代 JavaScript 包管理工具，是为了弥补 npm 的一些缺陷而出现的，在使用习惯上非常相近，但相比 npm 安装依赖的速度会更加迅速。

从 npm 5.0 开始新增了类似 yarn.lock 的 package-lock.json 锁文件，并对 node_modules 的文件依赖进行了大量优化，使 npm 在包的处理速度、安全性和确定性方面都有了很大提升，两者在构建时间上不再有显著差异。

为了方便起见，建议大多数团队选择最简单的选项 —— npm，它随 Node.js 一起提供，能以足够好的方式处理依赖。

# nrm 源管理器

nrm 是一个 npm 源管理器，它可以让你快速地切换不同的 npm 镜像源，无需使用 npm 命令行配置或安装第三方客户端。

首先，你需要将 nrm 作为全局依赖安装：

npm install -g nrm

nrm 自带了常用的 npm 镜像源，包括 npm、yarn、cnpm、taobao 和 nj(nodejitsu)，开箱即用。

nrm ls                          # 查看所有源
nrm current                     # 显示当前源
nrm use <registry>              # 使用指定源
nrm add <registry> <url> [home] # 新增镜像源
nrm del <registry>              # 删除指定源
nrm help                        # 查看帮助说明

# 终端工具

Hyper 是一款基于 Electron 的全平台终端工具，拥有丰富的主题和插件。当前版本：Hyper 3.0.2 (opens new window)

通过 Hyper CLI 安装主题和扩展插件，为命令行界面用户提供优美而可扩展的体验。推荐安装以下扩展插件：

你需要先在菜单中选择 Plugin 选项，然后点击 Install Hyper CLI command in PATH 安装 Hyper 命令行程序。

hyper i hypercwd     # 新标签保持上一个终端的目录地址
hyper i hype-pane    # 支持同时显示多个终端面板窗格
hyper i hyper-search # 支持在终端中进行全文检索

如果你不喜欢 Hyper 的默认主题，可以在线浏览 Hyper 主题商店 (opens new window) 并安装不同风格的主题。

:::tips ~/Library/Application Support/Hyper/.hyper.js Hyper 使用基于文件的配置方式，在菜单中选择 Preferences 选项，可以查看或编辑 .hyper.js 配置文件。 :::

# 浏览器

Google Chrome 是一个由 Google（谷歌）公司开发的网页浏览器，已连续多年市场占有率第一，也是最受程序员欢迎的浏览器。现在可以在 Google Chrome 官网下载 Chrome (opens new window)，体验新版 Chrome 的更多功能。

在日常开发中，不管你使用的是什么浏览器，都不可避免的会遇到兼容性问题，而浏览器兼容性问题主要是由于 不同浏览器内核 或 不同浏览器版本 对网页代码解析不一致，以及对 Web 标准的支持不统一导致的。

为了减少版面设计中常见的样式兼容性问题，同时避免使用现代 Web 开发框架带来的 API 兼容性问题，我们制定了一套完整的解决方案和兼容策略，并提供了相关配套工具，可以帮助我们在编码阶段实时感知当前代码在目标运行环境存在的浏览器兼容性问题，从而提高产品的可用性和用户体验，降低项目交付风险。请参阅：浏览器兼容方案及策略

# 编辑器

Visual Studio Code 是一款由 Microsoft（微软）公司开发的跨平台代码编辑器，主要针对于编写现代 Web 和云应用的轻量级编辑器，目前已经成为 Web 开发及其他语言的主流编辑器。

VS Code 基于开源软件构建，拥有丰富的扩展插件，你可以在官网下载 VS Code (opens new window)，享受现代编辑器的所有特性。

最后，如果你想拥有极致的编码体验，推荐安装 VS Code 前端开发必备插件。请参阅：开发工具 - VS Code 插件

# 版本控制

Git 是一个分布式版本控制系统。在 Mac 上安装 Git 有多种方式，最简单的方法是安装 Xcode Command Line Tools。

如果你使用 Mavericks（10.9）或更高版本的系统，在终端尝试首次运行 git 命令即可。

git --version # 如果没有安装过命令行开发者工具，将会提示你安装

你也可以将它作为 GitHub for macOS 的一部分来安装。它提供的图形化 Git 工具有一个安装命令行工具的选项，可以在官网下载 GitHub for macOS (opens new window)。

安装之后，需要进行一些 Git 全局设置：

git config --global user.name "Your Name"
git config --global user.email "your_email@startdt.com"

如果使用 SSH 方式来拉取/推送代码，请参考：使用 SSH 连接到 GitHub/GitLab (opens new window)

Git 有多种使用方式。你可以使用原生的命令行模式，也可以使用 GUI 模式。但是只有在命令行模式下你才能执行 Git 的所有命令，而大部分 GUI 软件只实现了 Git 所有功能的一个子集以降低操作难度。

团队开发中，遵循一套清晰、合理的 Git 流程及规范是非常重要的。我们推荐使用 Git Flow 来管理大型项目，并提供了相关工具支撑，以保证项目的协作效率和可维护性。请参阅：项目规范 - 工作流程

# 交互设计

# 交互原型

Axure RP 是一款专业的快速产品原型设计工具，是产品经理和前端开发的必备工具！当前版本：Axure RP 9 9.0.0.3727 (opens new window)

历史版本

# 设计工具

Sketch 是一款专为 Mac 而生的矢量绘图软件，是设计师和前端开发的必备工具！当前版本：Sketch 71.1 (opens new window)