jenkins/gitlab-ci/github actions/travis-ci
docker/k8s
本地生产包一致性(lock, .npmrc)、node、npm/pnpm版本一致性(nodeVersion, packageManager)
- 基本概念及原理
- 插件示例:router 生成
- 插件示例:redux 简化
- 插件示例:公共资源 copy 至产物
系统在发布后,会有希望用户刷新的业务场景。本文仅为 前端发布,纯前端实现提示
的场景提供一种思路/方案。如果后端发布也要触发提醒刷新,那一般只能通过接口交互方案来触发前端提示。
前端都可以用 nginx 来做什么?
- 静态资源代理、资源压缩
- 接口请求转发(解决跨域)
- A/B test(负载均衡)
概述
示例项目地址:https://github.com/zzyxka/fizzy-react
- 创建项目:包管理、镜像源
webpack
打包配置:基础打包配置文件、使用 plugin 处理 html- 在项目中使用 CSS:CSS Module, postCSS, 分离打包CSS
- 在项目中使用 React 和 TS - Babel
- 规范编码 Lint - ESLint, StyleLint
- 使用 Prettier 格式化项目
- 客户端路由 ReactRouter(Lazy Loading 方案)
- 开发生产分离:devServer、HMR;treeShaking、css 压缩;多线程打包、外部 CDN 等等
- 扩展
- UI 库:ant-design
- 状态管理 redux
- 其他流行方案:CSS IN JS 的 styled-component、Tailwind CSS 等不赘述
背景
toB 业务系统只打算兼容 Chrome,其他浏览器层出不穷的兼容问题不打算考虑。新版 Edge 和 Chrome 特性基本一致,所以不考虑细分判断 Edge 。
方案
使用下述判断基本满足条件(PC 和 移动端的 Chrome/Edge 访问)。
1 | isChrome = /Chrome/.test(navigator.userAgent) || /CriOS/.test(navigator.userAgent); |
示例页面:https://zzyxka.github.io/pages/browser-ua/index.html
CriOS
主要是为了判断 IOS 移动端 Chrome,原计划是通过 window.chrome
来判断,但经过测试发现,IOS 下的 Chrome,既没有 window.chrome
对象,又没有 包含 Chrome
的 userAgent。
日常工作线上化后,很多时候需要自动化给团队的同学推送消息。基本上会采用企微机器人的方式,但公司企微机器人服务因为撑不住,故不给非业务诉求使用了,只能退而求其次,想到使用 node-mail 来发邮件,但腾讯企业邮箱又有发信限制,其他没有发信限制的邮箱又不够安全合规。最终有了用 Electron 做一个桌面工具给团队同学安装使用的想法,后台(软件最小化)获取 websocket 消息推送,借助 Electron 能力,弹出 mac 消息提示。
举例一个实际的场景:系统发版申请,现有一个 web 页面,用来填写发版申请单,填写完成后推送提醒给发版执行人
核心处理:
- websocket 服务:使用 Node 提供 websocket 服务,web 系统/ node 服务 完成消息交互测试
- Eleectron 应用搭建:
- 使用 Electron 加载 web 系统,登录后传入 用户ID 连接 socket
- 使用 Electron 中 Node 线程获取 sokcket 消息并弹出提醒
过去在工作中因需要,匆忙给政企部门封装过一个 Electron 客户端应用,整个过程非常“敏捷“,印象中有很多版本方面的差异和兼容问题,但没有总结,这里对着官网整个基础 mac 应用,学习整理下各方面功能实现及 API 调用。
官网:https://www.electronjs.org/
本文完成 DEMO : https://github.com/zzyxka/electron-demo-app
注:本文以 mac 平台为准,其他平台可能需要增加“补丁”类模板代码。
问题
常常因为网络环境,遇到 github.com、github.io、raw.githubusercontent.com 等网址打不开,比如:博客用 raw.githubusercontent.com 图床,出现图片裂开等情况。
解决方案
通过多种方式(亲测只有 github520 方案稳定些),改 hosts,让其能够成功解析出 IP 地址,从而访问 github.com 等网址。
github520
https://gitee.com/klmahuaw/GitHub520
刷新 DNS 缓存
- 改完 hosts 后 edge 可使用 edge://net-internals/#dns 再清空下 host cache
- 同理 chrome 使用 chrome://net-internals/#dns 来清空缓存
- mac 可使用
sudo killall -HUP mDNSResponder
刷新系统 hosts 解析