《yarn serve 报错？别慌，咱一步步来搞定它！》
嘿，新手小白们！👋 你们有没有在用 yarn serve 命令的时候，遇到过报错的情况呀？😕 是不是一看到那串红色的错误提示，就感觉脑袋“嗡”的一下，完全不知道从哪儿开始解决？别着急，今天就跟大伙聊聊 yarn serve 报错的那些事儿，咱一起把这“小怪兽”给打败！💪
一、啥是 yarn serve？🤔
在聊报错之前，先简单说说 yarn serve 是个啥玩意儿，Yarn 是一个 JavaScript 包管理器，而 yarn serve 呢，就是用来在本地快速启动一个开发服务器的命令，比如说你正在开发一个网页应用，想看看自己写的代码在浏览器里长啥样，运行这个命令就能方便地预览啦，就像你在家里装修房子，想提前看看装修效果，用这个命令就能快速“搭建”出一个临时的展示空间，让你瞅瞅大概模样。😉
二、常见的报错及解决方法💡
（一）依赖缺失或错误🛠️
报错信息示例：“Cannot find module 'xxx'”
哎呀，这就像是你要做饭，却发现少了关键的食材一样麻烦，出现这个报错，大概率是项目所依赖的某些模块没有正确安装。
自问自答时间：
Q：怎么知道是哪个模块没安装呢？
A：看报错信息里提到的模块名呗，一般都会明确指出是哪个“家伙”找不到了。
解决方法：
1、检查项目的 package.json 文件，看看里面定义的依赖和 devDependencies 里面有没有缺失的模块，如果有，那就赶紧用 yarn add [模块名] 命令把它装上，比如说，少了一个叫做 lodash 的模块，就在终端里输入 yarn add lodash，然后回车，等待安装完成就行啦。
2、还有一种可能是依赖的版本不对，有时候指定了特定版本的模块，但安装的时候没按那个版本来，就会出现问题，这时候可以删除 node_modules 文件夹（这个文件夹里存放着所有的依赖模块），然后重新运行 yarn install 命令，让 yarn 根据 package.json 里的配置重新安装所有依赖，确保版本都正确。
案例：我有个朋友在做一个小项目，用到了一个名为 express 的模块来搭建服务器，结果运行 yarn serve 的时候就报错说找不到 express 模块，他按照上面的方法，检查 package.json 发现确实有这个模块的配置，但是不小心把版本号写错了，于是他删了 node_modules 文件夹，重新运行 yarn install，问题就解决啦，服务器顺利启动起来。👍
（二）端口被占用🚪
报错信息示例：“EADDRINUSE: address already in use [端口号]”
想象一下，你和朋友都想同时住进同一间已经有人住的房子，那肯定不行啊，端口被占用就是这个原理。
自问自答时间：
Q：咋知道是哪个进程占用了端口呢？
A：可以用一些系统命令来查看哦，在 Windows 系统下，可以用 netstat ano | findstr [端口号] 命令；在 Mac 或 linux 系统下，可以用 lsof i :[端口号] 命令，执行完这些命令后，会显示占用该端口的进程 PID（进程标识符）。
解决方法：
1、找到了占用端口的进程 PID 后，在 Windows 任务管理器里找到对应的进程结束它；在 Mac 或 Linux 系统下，可以用 kill 9 [PID] 命令来强制结束进程，比如说，发现端口 3000 被占用了，查到占用进程 PID 是 1234，在 Mac 终端里输入 kill 9 1234，回车，就把那个占用端口的“不速之客”给赶走啦，然后就可以重新运行 yarn serve 命令启动服务器了。
2、也可以修改项目的配置文件（比如前端项目的 vue.config.js 或 webpack.config.js 等），把服务器启动的端口号改一下，改成一个目前没有被占用的端口，比如从默认的 8080 改成 8081，保存配置文件后再运行 yarn serve 命令试试。
案例：我自己有一次在同时打开两个类似的项目，结果第二个项目运行 yarn serve 时就报错端口被占用了，我用上述方法查到了占用端口的进程是我的第一个项目，于是我结束了那个进程，第二个项目就能正常运行了，后来我就养成了习惯，每次开多个项目时，都注意给它们设置不同的端口号，省得再出这种麻烦事。😜
（三）语法错误📜
报错信息示例：“SyntaxError: Unexpected token”
这就好比你写文章的时候，语句不通顺，别人看不懂一样，代码里存在不符合语法规则的地方，yarn serve 就会报错。
自问自答时间：
Q：怎么才能找到语法错误在哪儿呢？
A：报错信息里一般会有个大致的位置提示，比如说在第几行第几列附近出现了问题，根据这个提示，去对应的代码文件里找找看，一般很容易就能发现错误的代码片段。
解决方法：
1、仔细检查报错位置附近的代码，看看是不是有拼写错误、缺少括号、变量未声明之类的常见语法问题，比如说，写了个 if 语句，但是忘记写后面的大括号了，这肯定是不行的，把语法错误改正后，重新保存代码，再运行 yarn serve 命令，看看问题是否解决。
2、如果自己不太确定是哪里的语法错误，可以利用一些代码编辑器自带的语法检查功能，像 Visual Studio Code 这样的编辑器，会在代码有语法错误的地方下面显示波浪线提示，鼠标放上去还能看到具体的错误信息，是不是很贴心呢？😃 按照编辑器给出的提示去修改代码就行啦。
案例：我在写一个函数的时候，少写了一个分号，结果运行 yarn serve 就报语法错误了，我按照编辑器的提示，很快找到了错误的位置，补上分号后，项目就能正常启动了，所以啊，大家平时写代码的时候一定要细心，多注意语法规范哦。🤗
三、预防报错的小妙招🎩
1、保持依赖更新：定期运行 yarn upgradeinteractive 命令，看看有哪些依赖有更新版本，根据实际情况选择更新，新的版本可能修复了一些 bug，能减少报错的概率，就像手机系统经常更新一样，能让你的设备运行更稳定。😉
2、代码规范书写：养成良好的代码书写习惯，比如缩进统一、变量命名规范等，这样不仅能让代码看起来更美观，也更容易排查问题，想象一下，如果代码写得乱七八糟，就像一团乱麻，出了问题都不知道从哪儿找起。🧐
3、做好备份：在对项目进行重大修改之前，比如安装新的依赖或者更改重要配置文件，先备份一下项目文件，万一修改后出现问题，还可以恢复到之前的状态，不至于手忙脚乱，这就好比出门前备份好家里的钥匙，万一丢了还有备用的嘛。😜
其实啊，遇到 yarn serve 报错并不可怕，只要咱们保持冷静，按照正确的方法一步步去排查和解决，就一定能搞定它，希望这篇文章能帮到各位新手小白们，让你们在编程的道路上少走一些弯路，顺顺利利地把项目做起来！加油哦！💪🎉
