分享我在前端高速成长的八个阶段

序言

我是谁

我叫小明，一个从业前端工作 5 年的打工仔，GPT-Runner 作者，我的 Github 主页地址：github.com/2214962083

我为什么要写这篇文章

今天我在一个同行群里看到很多刚入行的朋友在技术上有些迷茫，这让我想起自己曾经走过的弯路。希望通过分享我的前端高速成长经验，能为大家提供一些帮助和指引。这篇文章将跳过基础知识的讨论，尽量提供干货，帮助你快速成长。

高速成长阶段一：学会用 Google 英文搜索。

1. 为什么不用百度？ 因为搜索范围与质量相差太大。用谷歌，你通常能在第一页找到高质量的答案，而在百度你可能需要花费更多时间。
2. 英文搜索并不难，例如遇到 React 报错，可以直接复制错误信息的关键部分到 Google 搜索。大多数时候可以在 Stack Overflow 找到答案。
3. 如果没有报错信息，但某些第三方依赖包函数没作用，可以用 Google 搜 xxx not working，例如 React Router push not working。
4. 实在不会英文，可以先用中文写好再翻译成英文进行搜索，结果右键翻译成中文。
5. 除了解决问题，还可以搜资源，例如 ChatGPT 镜像网站等。

高速成长阶段二：学会用 Github issue 解决问题

1. 遇到第三方依赖或框架问题，很多时候可以在官方 GitHub 仓库的 Issue 列表中找到答案。看不懂可以右键翻译。
2. 搜索关键词尽量简短，因为 GitHub Issue 搜索不如 Google 智能。结果过多可以按评论数或时间排序，找相关条目查看。
3. 许多问题根源 是文档不完善或官方 bug，GitHub Issue 里常有临时解决方案，通常有很多表情反馈。 👍💖💯🎉
4. 如果找不到解决方法，可以新建 Issue 向作者求助，描述清晰问题，包括系统版本、环境版本、依赖版本、执行代码和报错信息，最好提供一个最小可复现 demo。

高速成长阶段三：学会查看源代码 debug 解决问题。

1. 遇到依赖问题且要 new issue 等待回复时，学会查看第三方依赖源码，尝试自己定位并解决问题。
2. 通常不必阅读全部代码，找到相关函数的 call stack，一层层 console.log 确认问题层次。
3. 可以提 PR 给作者 hotfix，也可以临时写打包脚本替代目标路径文件。

高速成长阶段四：学会搜索轮子（第三方依赖）。

1. 用好轮子能快速实现业务，下班走得早。学会用轮子比造轮子更重要。
2. 使用 GitHub 搜索相关关键词，例如 React 拖拽相关的轮子，搜索 react drag，按 star 数排名，检查 star 数和仓库更新日期。
3. 使用 npmjs.com 搜索相关包关键词，按 popular 排名。
4. 利用 tag 进行二次搜索，不管是 github 还是 npm，很多仓库和包都有 tag（标签），你可以点击相关标签进行二次搜索，找到更多同类。

高速成长阶段五：学会搜索 Github 代码

1. 遇到新技术栈项目感到虚时，因为以前没做过，没有参考项目，所以学会在 GitHub 搜索代码非常重要。这也是我为什么推荐你们用 Github 而不是 Gitee 的重要原因之一，因为前者资源丰富。
2. 比如，公司要你用 vue 对接 sentry，你以前没做过，官方文档可能也不是很完善（假设），那这个时候你可以利用 Github 搜索代码（注意是搜代码，不是搜仓库），关键词为 vue sentry ，然后筛选只显示 json 文件，找到 package.json 带有 vue 和 sentry 依赖的项目，点进去项目里再搜索 sentry ，此时你就能看到完整的 sentry 在 vue 项目里对接和使用实践。
3. 开新项目前，通过搜代码关键词找同类项目参考，学习别人的优点。

高速成长阶六：学会自我驱动成长

1. learning in doing，构思有趣的项目，自我驱动实现，不因困难而放弃。
2. 关注前沿技术信息，例如 GitHub Trending。
3. 国内外技术资源，例如掘金网站、技术公众号、博客、Reddit 讨论区等。
4. 不要限制自己的发展范围，例如前端也要了解后端和AI等，不必深度学习但应有所了解。

高速成长阶段七：参与开源

1. talk is cheap，show me the codes，开源项目代码是实力证明，能大大提升就业机会。
2. 学习参与小项目的 PR，了解开源贡献流程。
3. 尝试开启自己的开源项目，解决通用需求，学习维护开源项目。
4. 开源记录是良好的求职简历，体现在 GitHub 个人主页上。

高速成长阶段八：学会用 AI （非常重要）

1. GitHub Copilot 和 ChatGPT 4、Claude-3-Opus 是当前最好的编程辅助工具，无论如何都要开通。
2. 计算成本与收益，时间价值高于工具费用，节省下的时间可提升自己。
3. GitHub Copilot 可以节省大量 coding 时间，是不可替代的工具。
4. ChatGPT 4 和 Claude-3-Opus，适合技术选型、debug、code review 等。
5. 选择最好的工具，时间节约更多，不要贪便宜，免费是昂贵的，因为它少节约了你很多时间，时间就是财富。
6. 你要知道模型能干什么。 Github Copilot 擅长举一反三，和根据注释生成代码，ChatGPT 4和 Claude-3-Opus 适合技术选型（问他轮子如何选择）、适合 debug，复制错误和源码给它，叫它 fix、适合 code review ，复制写好的代码给它，问它是否有改进的地方（我一般喜欢问使用 SOLID 最佳实践优化我的代码，你能从中学习到很多优秀的设计模式）

附言

1. 我平时比较懒，所以很少写文章和评论，但是看到好的文章我会收藏和记下关键词，脑子里有索引关键词，以后遇到要用再搜索查看，这对我个人很高效，我不知道这是否适合你们。
2. 因为懒，所以目前只有这篇文章，后续可能做一期视频分享实际操作讲解。
3. 我现在喜欢让 AI 作为我的导师，和它讨论一些问题，我总能从它们那里学到很多知识，你们也可以这样，这真是一位性价比非常高的导师，无论是面对哪个行业。
4. 就业环境并不乐观，但是你可以多参与一些热门的开源项目，说不定哪天机会就会找上门，最好把英语学好，这是非常重要的。
5. 减少期望、少负债，过好自己的人生，不用管外部评价，我希望你 enjoy 自己的生活。你保证你在前 50% 就行，至少你转行做外卖时会有一半人陪你。