跳转至

环境配置

时效性文档

本文档是具有时效性的文档，为了保证内容准确应当保持更新。

本文档的最后更新时间在页面最底部。

为了能够在本地正确运行我们下发的代码，请你按照本 Step 配置本地环境。

在配置环境中遇到问题，请首先检查这一问题是否已经在 FAQ 部分提出。如果这一问题并未出现在 FAQ 或者 FAQ 中提供的解决方案并不能解决问题，请在微信群或者网络学堂中提出。

本文档截图均基于 Mac 系统与 Safari 浏览器。如果你是 Windows 用户，推荐你使用 WSL 进行环境配置。

Node.js

Node.js 是服务器端运行 JavaScript 的环境，我们需要在本地配置 Node.js 环境以运行我们的前端代码。

对 Node.js 更为细节的介绍参考计算机系学生科协技能引导文档 https://docs.net9.org/languages/node.js/。

可以通过 Node.js 官方中文网站 下载并安装 Node.js，我们推荐下载长期维护版本（Long Time Support），LTS 版本相较于最新版本往往更为稳定。

如果你是 WSL 用户，请在 这个页面 下载 Linux 二进制文件 (x64)：

1
2
3
4
5
mkdir ~/workspace && cd ~/workspace
wget https://nodejs.org/dist/v18.14.2/node-v18.14.2-linux-x64.tar.xz
tar -xf node-v18.14.2-linux-x64.tar.xz
cd node-v18.14.2-linux-x64/bin
pwd

请将这个输出的路径通过 ~/.bashrc 文件手动添加到环境变量中：

1
2
# Append to the last line
export PATH=~/workspace/node-v18.14.2-linux-x64/bin:$PATH

之后通过以下命令重载终端配置: 

1
source ~/.bashrc

为了确认是否正确安装，可以打开终端，输入指令 node -v 确认：

yarn

Node.js 下载后会自带有包管理工具 npm 用于管理项目内所用到的第三方依赖。这里我们更推荐使用 yarn 作为后续开发的包管理工具，因为 yarn 相对于 npm 具有更快的下载速度、更清晰的命令行输出。

对 yarn 与 npm 更为细节的介绍参考计算机系学生科协技能引导文档 https://docs.net9.org/languages/node.js/npm/。

安装 yarn 时，你首先需要确定 npm 已经安装完毕，只需要通过 npm -v 确认：

之后运行指令 npm install -g yarn 即可安装 yarn，随后可以通过指令 yarn -v 来确认是否安装成功（这里如果遇到了读写权限问题，可能需要切换到管理员模式，Mac 与 Linux 系统上可以直接在指令前加 sudo，Windows 系统上则应在打开终端时选择“以管理员身份运行”）：

换源

由于 yarn 默认从国外服务器请求数据，其很有可能因为一些魔法因素而下载速度极慢，这个时候推荐将 yarn 换源到国内镜像保证下载速度。

yarn 换源可以参考 这篇博客。

TypeScript

TypeScript 是 JavaScript 的超集，可以将其简单理解为带有类型标注的 JavaScript。TypeScript 的编译器会在编译时检查变量类型是否满足标注要求，若满足则会编译生成 JavaScript 代码。

可以通过 yarn 安装 TypeScript，指令为 yarn global add typescript。

为了确定 TypeScript 是否正确安装，可以需要通过 tsc -v 确认：

本项目的配置

在配置完最基本的环境后，下一步可以将本次小作业 git clone 到本地，进入该项目的根目录作最后的配置。

下面我们简单讲解 yarn 的使用方法：

1
2
3
4
5
yarn install # 自动安装依赖
yarn add lodash # 添加名为 lodash 的依赖
yarn add -D lodash # 添加开发环境下名为 lodash 的依赖（即生产环境下不使用该依赖）
yarn remove lodash # 删除名为 lodash 的依赖
yarn start # 运行名为 start 的脚本

而 yarn 如何确定怎么自动安装依赖或者应当运行什么样的脚本，均会在项目根目录下 package.json 文件内定义。本次小作业的 package.json 文件节选为：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
{
    "name": "conway-game",
    // ...
    "scripts": {
        // ...
        "fix": "eslint src --ext .js,.jsx,.ts,.tsx --fix",
        // ...
    },
    "dependencies": {
        "axios": "^1.2.0",
        // ...
    },
    "devDependencies": {
        "@testing-library/jest-dom": "^5.14.1",
        // ...
    }
}

其中 dependencies 与 devDependencies 字段定义了本项目所有的依赖名称以及版本要求，而 devDependencies 字段下的是开发环境的依赖。此时，在本项目根目录下运行 yarn install 即会安装这里所列举的所有依赖。

另外，scripts 字段定义了所有可以运行的脚本，这里运行 yarn fix 相当于运行 eslint src --ext .js,.jsx,.ts,.tsx --fix。

在配置好 yarn 的基础上，现在运行 yarn install 安装第三方依赖。本次小作业不需要在我们提供的第三方（已经列在 package.json 中）之外额外安装其他第三方依赖即可完成：

所有的第三方依赖将会安装在 node_modules 目录下，该目录应当已经被 .gitignore 忽略。

黑洞

node_modules 是一个文件结构十分复杂且庞大的文件夹，并且随着依赖迭代更新和包管理工具对其的维护，其内部的结构变动十分频繁，所以该目录非常不利于文件系统管理，故戏称为“黑洞”。

另外，切记在 .gitignore 内忽略该目录，否则软工大作业刚开始一周内就在仓库里写了十几万行代码的，就有可能是你的小组。

之后，运行 yarn dev 启动本次项目：

项目启动后应当能在本地端口上访问到前端页面，默认端口号为 3000。上述截图中因为默认端口 3000 被占用，故采用了 3001 端口。

打开浏览器并在地址栏输入 http://localhost:3000（默认端口占用时需要替换端口号），即可访问到本次小作业前端页面。若能够看到类似于下图的界面，就说明环境配置完成，可以继续完成小作业了🎉：

热加载机制

React 是具有热加载机制的，即你只要修改代码并保存，代码上的变化应当立刻反应到 UI 上。然而热加载机制可能在 WSL2 上失效，具体请参考 这个 Github Issue，只需将项目放到 WSL 自己的目录而非 /mnt/ 下即可。

作者: Ashitemaru (83.22%), c7w (16.78%)