《我的开发白皮书》是用于介绍我的开发理念，工作流程，以及我选择使用的工具和技术。
这份白皮书不仅会让我自己在开发过程中保持清晰的思路，也能为其他人提供一些选型思路。
变更时间 | 变更说明 |
2024-01-07 | 初始化 |
开发工具
每一个入门程序员最热衷的事情，就是倒腾开发工具。就像新入学的小学生，特别喜欢琢磨文具。
IDE & 开发辅助工具
项目 | 我的理解 |
WebStorm（收费）✅ | 可能是最强大的前端开发工具了吧。免折腾、免配置，省心就选它。唯一缺点是收费不便宜。兜兜转转试了很多其他编辑器，一直陪伴我的还是它。 |
Visual Studio Code（免费） | 社区使用最广泛的编辑器（很多在线IDE都是基于它），不限于前端开发。千好万好我不喜欢，每次同事找我排查问题，用着让人抓狂，想砸电脑的程度。但不影响它受欢迎。建议都试试，最终只选择一个作为未来长期使用的工具。 |
GitHub Copilot（付费） | 绝对能大大提高你的开发效率。智能化推断非常准。复杂的算法，只需要一句描述就能快速生成。 |
通义灵码（免费）✅ | 效果同 GitHub Copilot。阿里出品，免费。 |
whistle | 代理工具，免费、简洁明了，比 Charles 好用太多。 |
Git
作为一名程序员，Git 一定是需要深度掌握的。
项目 | 我的理解 |
GitHub Desktop ✅ | 个人使用过最好用的 GUI 提交工具。特点：支持单个文件内部分内容提交。 |
MonoRepo
一种单体 Git 仓库管理多个项目的方式。
项目 | 我的理解 |
Yarn✅ | monorepo 项目推荐，没有改造成本，0配置。npm 安装总是会各种失败，yarn 和 pnpm 则没问题。 |
PNPM | 有些许改造成本。有自己的monorepo 配置文件（这是我放弃的原因之一） |
lerna | 一般搭配 yarn 使用。管理包之间的依赖、自动化发包很方便。 |
部署
将写好的代码部署到线上供用户访问，需要一个靠谱的平台。
项目 | 我的理解 |
Vercel✅ | 个人认为对前端开发者最友好的部署平台，如果你是 React\Next.js 开发者，更是如此。使用成本极低。 |
阿里云 | 高度自定义服务器。不建议小白使用。上手成本较高。 |
Heroku | 国内访问不友好 |
CI/CD ✅ | 持续集成、持续部署。GitHub Action 免费且好用。 |
firebase | 功能强，插件式功能插拔使用。对国内用户不友好，不推荐。 |
数据库
项目 | 我的理解 |
mongodb ✅ | 对前端开发者友好的数据库 |
indexedDB✅ | 前端环境的专属数据存储器方案，具备基本的数据库特征。 |
notion ✅ | 可以把notion作为一个CSM 管理平台。 |
图床/CDN
项目 | 我的理解 |
阿里云✅ | 大而全的解决方案 |
七牛云 | 图床很好用，由系统级别的图像处理功能。 |
域名管理
让用户访问你服务的最后一步。用一个域名在不同提供商平台上报价不同，应该货比三家。
项目 | 我的理解 |
阿里云✅ | 国内用户很方便的域名服务商，价格合适、配置方便。 |
国际域名可以在这里看看。 |
浏览器
项目 | 我的理解 |
Chrome ✅ | 全球市场份额第一的浏览器，开发者的最爱。特点功能强大简洁 |
Chrome canary ✅ | 一个chrome不够，那就再来一个开发版。可以超前体验最新功能。 |
Safari ✅ | Apple 用户的不二选择。 |
Firefox | 注重隐私是它的特点。 |
Edge | Chrome 的定制版，有点花里胡哨。 |
研发阶段
框架选型
项目 | 我的理解 |
React ✅ | 长期使用，选一个就好 |
Next.js ✅ | 基于React 的 SSR、多页面解决方案的不二选择。 |
构建工具、脚手架
项目 | 我的理解 |
Gulp ✅ | 可以自定义写一些构建流程，如压缩文件夹等。不能用配置化完成的工作用它来做。 |
Rollup ✅ | 自己写一些纯 js 项目，速度打包，很轻量。兜兜转转，用了很多脚手架后，会发现，rollup 是最好用的。产物也最干净。（在你有高级自定义的场景下） |
plasmo ✅ | 浏览器插件的脚手架，自带热更新、集成 React/Vue。一定用它，不要自己从0搭建。 |
Parcel ✅ | 低侵入性，几乎0配置即可开箱使用，现有项目接入比较方便。产物会比较“脏” |
tsdx | 支持开发 NPM 包、React 组件的脚手架工具。 |
react 组件库的脚手架，自带 playbook 、doc 生成。缺点：开发环境和打包工具分别是两套系统：umi、father。存在开发效果和产物不一致的情况。 | |
Webpack | 我希望每一个前端开发者都不再需要关注这些东西。 |
- ✅ ：作者正在使用、推荐
- ❌ ：作者不推荐
- ⚠️ ：已知存在部分问题，谨慎使用