📖

我的开发白皮书

AI 摘要
推荐
🌟🌟🌟
description
Tags
技术
博客
Date
Jan 7, 2024
《我的开发白皮书》是用于介绍我的开发理念,工作流程,以及我选择使用的工具和技术。
这份白皮书不仅会让我自己在开发过程中保持清晰的思路,也能为其他人提供一些选型思路。
变更时间
变更说明
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 使用。管理包之间的依赖、自动化发包很方便。
[wip]lerna 使用记录

部署

将写好的代码部署到线上供用户访问,需要一个靠谱的平台。
项目
我的理解
Vercel✅
个人认为对前端开发者最友好的部署平台,如果你是 React\Next.js 开发者,更是如此。使用成本极低。
阿里云
高度自定义服务器。不建议小白使用。上手成本较高。
Heroku
国内访问不友好
CI/CD ✅
持续集成、持续部署。GitHub Action 免费且好用。
firebase
功能强,插件式功能插拔使用。对国内用户不友好,不推荐。

数据库

项目
我的理解
mongodb ✅
对前端开发者友好的数据库
indexedDB✅
前端环境的专属数据存储器方案,具备基本的数据库特征。
notion ✅
可以把notion作为一个CSM 管理平台。
 

图床/CDN

项目
我的理解
阿里云✅
大而全的解决方案
七牛云
图床很好用,由系统级别的图像处理功能。
[wip] 阿里云存储配置指南

域名管理

让用户访问你服务的最后一步。用一个域名在不同提供商平台上报价不同,应该货比三家。
项目
我的理解
阿里云✅
国内用户很方便的域名服务商,价格合适、配置方便。
国际域名可以在这里看看。
 

浏览器

项目
我的理解
Chrome ✅
全球市场份额第一的浏览器,开发者的最爱。特点功能强大简洁
Chrome canary ✅
一个chrome不够,那就再来一个开发版。可以超前体验最新功能。
Safari ✅
Apple 用户的不二选择。
Firefox
注重隐私是它的特点。
Edge
Chrome 的定制版,有点花里胡哨。
 

研发阶段

 

框架选型

项目
我的理解
React ✅
长期使用,选一个就好
Next.js ✅
基于React 的 SSR、多页面解决方案的不二选择。
推荐的一些 npm 包

构建工具、脚手架

项目
我的理解
Gulp ✅
可以自定义写一些构建流程,如压缩文件夹等。不能用配置化完成的工作用它来做。
Rollup ✅
自己写一些纯 js 项目,速度打包,很轻量。兜兜转转,用了很多脚手架后,会发现,rollup 是最好用的。产物也最干净。(在你有高级自定义的场景下)
plasmo ✅
浏览器插件的脚手架,自带热更新、集成 React/Vue。一定用它,不要自己从0搭建。
Parcel ✅
低侵入性,几乎0配置即可开箱使用,现有项目接入比较方便。产物会比较“脏”
tsdx
支持开发 NPM 包、React 组件的脚手架工具。
umi ⚠️
react 组件库的脚手架,自带 playbook 、doc 生成。缺点:开发环境和打包工具分别是两套系统:umi、father。存在开发效果和产物不一致的情况。
Webpack
我希望每一个前端开发者都不再需要关注这些东西。
  • ✅ :作者正在使用、推荐
  • ❌ :作者不推荐
  • ⚠️ :已知存在部分问题,谨慎使用