在前端开发的世界里,一个高效、稳定的开发环境是高效工作的基石。它不仅能够提升你的工作效率,还能帮助你更快地适应团队的工作节奏。本文将详细介绍前端开发需要具备的环境及工具。
开发环境
Node.js
通常我们的前端项目都是依赖Node.js环境的,但是不同的项目可能会对Node.js的版本有不同的要求。为了灵活地管理这些不同版本的Node.js,我们通常不推荐直接在系统上安装Node.js,而是采用Node.js版本管理工具,如NVM(Node Version Manager)。
Node.js版本管理工具NVM
NVM是一个简单而强大的工具,它允许我们在同一台机器上安装和切换不同版本的Node.js,从而确保每个项目都能运行在合适的环境中。这不仅提高了开发效率,还避免了版本冲突带来的问题。以下是Mac电脑安装NVM的步骤:
1.打开终端,然后运行以下命令来安装NVM。这个命令会从NVM的官方GitHub仓库下载安装脚本,并使用bash执行它。
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash
2.配置环境变量,以便在终端中使用NVM。在~下执行nano ~/.zshrc
,在打开的编辑器中,添加以下行到文件的末尾:
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"
3.保存并退出编辑器。在 nano 编辑器中,按 Ctrl + O 保存文件,按回车确认,然后按 Ctrl + X 退出编辑器。
4.重新加载配置文件。为了让更改立即生效,需要重新加载.zshrc文件。在终端中运行以下命令:source ~/.zshrc
5.验证NVM安装。最后通过运行以下命令来验证NVM是否安装成功:执行nvm
或nvm -v
查看是否安装成功。
Tips:Windows电脑的安装可以在这里选择对应安装包安装解压即可。
最后可以参考下方安装指定版本的Node.js。
NVM常用命令:
nvm install <version> ## 安装指定版本,可模糊安装,如:安装v4.4.0,既可nvm install v4.4.0,又可nvm install 4.4
nvm uninstall <version> ## 删除已安装的指定版本,语法与install类似
nvm alias default 18 ## 设置全局默认的 Nodejs 版本为 18
nvm use <version> ## 切换使用指定的版本node
nvm ls ## 列出所有安装的版本
nvm ls-remote ## 查看现在 Nodejs 都有哪些版本 nvm ls-remote | grep v14
npm源设置
在前端开发中,设置正确的npm源(registry)是非常重要的,因为它决定了npm包的下载速度和稳定性。有时,由于网络问题,直接使用npm的默认源可能会很慢或者不稳定。在这种情况下,我们可以设置一个更快的npm源,比如使用国内的npm镜像源。
全局设置npm源: 如果你想要为整个系统设置一个默认的npm源,可以使用以下命令:
npm config set registry https://registry.npmmirror.com/
私有npm: 如果你的项目需要访问特定的私有npm仓库,比如@xxx的私有包,你可以设置特定的scope源:
npm config set @xxx:registry https://rnpm.xxx.com
这样,当你安装@xxx作用域下的包时,npm将会使用这个特定的源。
项目级npm源: 如果你只想为特定的项目设置npm源,而不是全局设置,你可以在项目的根目录下创建或编辑.npmrc文件,并添加以下内容:
registry=https://registry.npmmirror.com/
@xxx:registry=https://rnpm.xxx.com
这样,只有在这个项目中运行npm命令时,才会使用这些设置的源。
npm源管理器NRM
在前端开发中,npm源的稳定性和速度对开发效率有着直接影响。由于不同的npm源可能在不同时间表现各异,有时某些源可能访问缓慢,甚至出现访问失败的情况,而有的源可能没有最新的包版本。因此,能够快速切换到一个稳定且更新的npm源是非常有用的。
nrm 是一个npm源管理器,它提供了一个简单而高效的方式来管理和切换不同的npm源。使用nrm,你可以轻松地在多个npm源之间切换,以确保始终使用最佳的源来安装和管理你的npm包。
安装nrm: npm install -g nrm
查看是否安装成功: nrm --version
查看nrm支持的所有npm源: nrm ls
前面带 * 号的表示正在使用的源。
切换源: nrm use <registry>
添加新的源: nrm add <registry> <url>
删除源: nrm del <registry>
设置默认源: nrm set default <registry>
开发工具
Homebrew
Homebrew 是 macOS 上一款常用的包管理工具,用于安装、升级和管理软件包,可以通过它来安装 Git 等。
安装 Homebrew 非常简单,只需在终端中运行以下命令:
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
版本控制工具Git
通过 Homebrew 可以安装 Git,在终端中输入以下命令即可:
brew install git
设置git提交的用户名和邮箱:
git config --global user.name "yourname"
git config --global user.email yourname@xxx.com
常用git命令:
git clone xxx克隆项目代码
git status查看git信息
git pull从当前分支跟踪的远程分支拉取最新代码并合并,包含了两个操作:
git fetch: 从远程仓库下载最新的代码变更,但是不合并到本地分支。
git merge: 将远程分支的变更合并到当前本地分支。
git add .添加到暂存区
git commit -m ""提交代码
git push origin dev推送代码到远端对应分支dev
commit message可选项:
feat:新增了一个功能,和语义化版本中的次版本号对应
fix:修复了一个bug,和语义化版本中的修订号对应
refactor:重构
docs:文档
style:格式,不影响代码运行的变更
build:影响构建系统或外部依赖的变更
perf:改进性能的变更
chore:杂项
VSCode
下载地址:https://code.visualstudio.com/
VSCode插件推荐:
浏览器
浏览器推荐使用Chrome。
截图贴图工具Snipaste
Snipaste是一款功能强大的截图和贴图工具,Windows和Mac都可以使用。
下载地址:https://zh.snipaste.com/