新人前端入职第一天——京东实习配置开发环境实录🐶🐶🐶

本文是笔者到京东实习领完电脑到配完开发环境的实录，既作为笔者之后自己的参考，也希望能帮助到更多前端新人小伙伴。（注：本文面向已有前端开发经验，但初次加入工作的同学。本文是入职配环境的步骤大纲，会着重一些工作场景与自学场景有差异的地方，对于安装教程、环境变量等详细内容，善用搜索引擎即可，本文不再赘述）

安装开发软件

⭐ VSCODE

官网地址：Visual Studio Code - Code Editing. Redefined

webstorm

官网地址：JavaScript and TypeScript - JetBrains Guide

通常公司对程序员用哪个 IDE 不会有限制，看个人喜好就行。但：

1. 在校学生可以用许可证白嫖 webstorm ,工作后如果公司不提供账号，自己购买正版很贵（虽然可以淘宝，但不提倡盗版）。
2. 通常大一点的公司都会有一定的前端基建，会在 vscode 上提供一些内部插件。
3. webstorm 对电脑性能还是有一定要求的，如果公司发的电脑内存较小可能会卡顿。

基于以上原因，笔者最终从 webstorm 换到了 vscode。

配置开发环境

⭐ nvm

工作中的项目有的是五年前的，有的是三年前的，有的是新启动的，项目在稳定上线后通常就不会再去更新其 node 版本和依赖模块的版本，所以我们需要一个工具来为不同的项目配置不同的 node 版本。

下载地址

GitHub地址（安装与使用教程）

虽然官方的英文是文档的，但还是建议阅读一下，比如每次安装新的 node 版本的时候要重新安装先前全局安装的模块这种细节，大部分中文的安装教程博文都略去了。

注意事项：

1. 尽量先安装 nvm， 通过 nvm 安装 node.js，如果先安装了 node.js，要在 nvm 安装过程中正确配置 node.js 的路径。
2. 安装完毕后直接在命令行使用会提示 'nvm'/'node' 不是内部或外部命令，也不是可运行的程序，搜一下跟着网上教程配置环境变量即可。不过这里要注意的是，公司电脑可能会禁止打开编辑系统环境变量，通过 控制面板->用户账户->更改我的环境变量 打开即可。
3. 配置环境变量 PATH 时可以把 nodejs 目录下的 node_global 文件夹也添加进去，这个文件夹存放的是全局安装的模块。这样的话日后安装如 yarn 、whistle 等模块时无需再单独配置环境变量即可在命令行中使用其命令。
4. 它并不是真的为每个项目配置不同的 Node 版本，而是允许开发者在同一台机器上轻松切换不同的 Node 版本。nvm 通过修改环境变量来改变当前 shell 会话中使用的 Node 版本，这样就可以在不同的项目中使用不同的 Node 版本，而不会相互干扰。当你关闭当前的 shell 会话或者打开一个新的会话时，你可能需要再次使用 nvm 来选择所需的 Node 版本。

⭐ node / npm

当通过 nvm 安装好 node 之后，我们要把 npm 的下载源换成公司的：

npm config get registry 
//查看下载源： https://registry.npmjs.org/

npm config set registry http://npm.jd.org
// 切换 npm 下载源到京东源

yarn config set registry http://npm.jd.org
// yarn 也是一样的

⭐ git

Git 官网（下载链接与官方文档）

ssh

安装好 git 之后我们就可以拉取远程仓库的代码了，但是在拉取公司项目代码之前还差一步——生成 SSH 密钥。

SSH密钥用于SSH协议中的密钥认证，提供一种安全的方式来进行远程登录或其他网络服务。它包括一对密钥：一个私钥（保密）和一个公钥（可以公开）。公钥放在远程服务器上，私钥由用户安全保管。当用户尝试连接到服务器时，服务器使用公钥来验证用户的私钥，如果匹配，则授予访问权限，无需输入密码。这种方式比传统密码认证更安全。

如果公司有自己的代码仓库，会对生成并上传 SSH 有教程。

开发助力工具

whistle

whistle 安装启动及使用教程

企业中前后端开发进度经常会不一致，有时候后端的接口还没上线，但我们做完了页面想自己测试一下效果，可以通过 whistle 抓包来自己模拟数据。

SwitchHosts

GitHub 地址（含中文教程）

其实直接修改 hosts 文件也可以，但 SwtichHosts 会方便一些。

有时公司后端的服务器只会响应来自特定域名的请求，比如京东的后台只响应 xxx.jd.com 这种以 jd.com 结尾的域名发起的请求, 这就需要我们通过配置 webpack 的 host 为 xxx.jd.com，同时用 hosts 文件把 xxx.jd.com 解析到 127.0.0.1 上。

实用工具

GifCam

GifCam | GIF 录制工具

结语

前端的环境相较于后端，其实是很好配置的，但常常会在让项目跑起来的时候遇到各式各样的问题，模块版本、node 版本、公司的 npm 源找不到某个包等等。笔者的建议是如果自己查超过二十分钟还不能解决，就尽快问组里的前辈，不要耽误在那做无用功。

笔者也是第一次进入互联网公司，第一次领到公司电脑进行开发，难免有所疏漏，欢迎前辈们在评论区给出批评建议。