整理web前端架构师应会必会的技术栈

“Web前端架构师”所有的应会必会技术栈

脚手架-创建项目

包管理：lerna 环境变量：dotenv 命令行：commander log定制：npmlog 版本检查：semver Npm api Npm 包安装：npm install 通用 Package类封装 命令行交互：inquirer 命令行loading: spinner ejs模板渲染 文件匹配器： glob egg.js

脚手架-发布项目

云构建 CloudBuild封装 Githug & Gitee API接入 git操作：simple-git git flow 自动化 npm 自动化 WebSocket Egg-socket.io egg-redis Base64 加密&解密 命令行link: terminal Link

前端-toB

Typescript Vue3 Vuex4 Vue Router4 Ant Design Vue Ant Design Vue 二次开发 图片裁剪： cropperjs 快捷键： hotkeys-js 二维码： qrcodejs2 拖动排序：vue-draggable-next echarts 组件拖动 组件移动 右键菜单 复制粘贴 撤销重做 动态表单

前端-toC

Vue3 SSR 移动端响应式 事件处理 埋点统计

服务端

Koa2 缓存 输入验证Validator 登录验证JWT GraphQL JSON Schema 跨域配置CORS 文件上传 加密Crypto 模板引擎pug 定时任务 静态资源处理 ORM框架Sequelize 日志分析 mongoose

第三方服务

阿里云 OSS 阿里云 ARMS 腾讯云短信服务SMS 百度云敏感内容审查 自研统计服务 EAS

性能优化

Webpack-bundle-analyzer webpack构建优化 Webpack 分包 Webpack gzip压缩 Webpack extra css h5图片懒加载 静态资源发布CDN

打包构建

webpack webpack插件开发 rollup Githooks:husky Lint 检查 Prettier 格式化 jest 单元测试 mocha 单元测试

线上云服务

域名备案和解析 HTTPS证书 云服务器ECS 云MySQL 云MongoDB 云 Redis 阿里云 OSS 阿里云 CDN 阿里云 WAF 反向代理 Nginx 进程守护 pm2

业务组件库

rollup 打包 rolup vue 插件 rollup typescript插件 rollup commonjs 插件 rollup css-only 插件 sourcemap vue-test-utils npm 发布和配置

组件平台

Egg.js restfull API Egg-mysql egg-mock umi Ant Design 4 React hooks

持续集成 CI/CD

CentOS ssh 信任 shell 脚本 github actions 持续集成 travis docker docker-compose 自动化接口测试Super Test 自动发布测试机 release-it

运维&监控

服务器监控 ali-node 心跳检测 异常处理 报警 定时任务 Crontab 日志拆分pm2-logrotate 安全预防 防御CC攻击 防刷防爬

研发流程

架构设计 技术选型 技术方案设计 接口设计 数据库设计 制定计划 监控执行 多人协作 Code review Bug 修复流程 产品迭代流程

团队建设

绩效考核 面试技巧 工作汇报 晋升答辩 沟通技巧 团队分享