Skip to main content

102 posts tagged with "全栈开发"

View All Tags
· 5 min read

Tailwind v4 重新设计 CSS 入口,几条新指令各司其职,不再像 v3 那样靠 @tailwind 堆叠。

  1. @import "tailwindcss":替代 v3 的三条 @tailwind,整合 base + utilities
  2. @theme:设计 token 入口,颜色字号间距都在这定义
  3. @utility:自定义工具类,替代 v3 的 @layer 写法
  4. @variant:自定义变体(hover / focus / ...),替代 v3 的 JS 配置
  5. 级联顺序:v4 只剩 base → utilities 两层

核心:@theme 把设计 token 从 JS 搬到 CSS,样式与变量同源。

· 5 min read

Electron 持久化没有"标准答案",按数据类型选方案,比选库更重要

  1. 写对目录:一律写 app.getPath('userData'),打包后应用目录是只读的。
  2. 配置 / 偏好:用 electron-store,一个 JSON 文件搞定,不用自己 fs
  3. 结构化大数据:上 better-sqlite3,同步 API,比 IndexedDB 省心。
  4. 敏感信息:token / 密码走 safeStorage,落盘前用系统钥匙串加密。
  5. 别踩的坑:renderer 里的 localStorage 会被用户清缓存清掉,不能当数据库。
· 5 min read

Node-keytar 是 Node.js 上最成熟的 OS 钥匙串绑定库 —— 但它 已经 archived

  1. 本质:原生模块,分别封装 macOS Keychain、Windows Credential Vault、Linux libsecret
  2. 核心 APIsetPassword / getPassword / deletePassword / findCredentials 四件套
  3. 适用场景:本地 CLI / 桌面工具保存用户 Token,不适合服务端容器
  4. 现状:仓库 2022-12 已 archived,最后版本 7.9.0 停更 4 年
  5. 替代方案:Electron 用 safeStorage,纯 Node 用 @napi-rs/keyring
  6. 跨平台:macOS / Win 零配置;Linux 需 libsecret-1-dev + Keyring 服务在跑
· 6 min read

grep 搜文件内容、rg 是 grep 的现代升级、glob 匹配文件名——三者名字长得像,但 各管一摊

  1. grep:POSIX 自带文本搜索,-r/-n/-i/-E 是高频选项
  2. rg (ripgrep):Rust 写的现代版,默认跳过 .gitignore 和二进制
  3. glob:shell 通配符(*/?/[...]),没加引号会被 shell 展开
  4. globstarshopt -s globstar 后,** 才递归匹配任意层级
  5. find -name:find 自己的类 glob 语法,不走 shell 展开
  6. 别乱混grep *.js 被 shell 拆成多文件,只搜当前目录
· 6 min read

iTerm2 历史丢失是两套独立机制,默认都是真丢弃

  1. scrollback 输出:默认 ~2000 行,clear/CLI 会发 CSI-3J 主动清空
  2. zsh history:HISTSIZE/SAVEHIST 默认 500/1000,只 exit 时写盘
  3. tmux 独立 history-limit,外层 iTerm scrollback 直接失效
  4. 已丢内容就是真丢,macOS 不留终端文本
  5. 长期任务用 script 录屏,iTerm 崩溃也能找回
  6. 关闭 Tab 自动存盘:Save scrollback to file when window is closed,默认目录 ~/Library/Application Support/iTerm2/Scrollback/
· 14 min read

Monorepo 不需要从 pnpm / Turborepo 开始——npm 7+ 自带的 workspaces 字段就能跑,是真正零成本的入门。

  1. 是什么:多项目放一个仓库,不强制任何工具
  2. 第 1 档:npm workspaces(npm 7+ 内置),根 package.json 加字段
  3. 第 2 档:yarn workspaces(早期方案,yarn 1 时代)
  4. 第 3 档:pnpm workspace(当前事实标准,磁盘节省 50%+)
  5. 第 4 档:Turborepo / Nx,只有跨包 build 依赖才需要
  6. 口诀:包数 <5 npm workspaces,<10 pnpm,10+ 才上 Turborepo
· 5 min read

Bun 是什么:把整套 JS 工具链(运行时、包管理、打包、测试)塞进一个二进制文件的 Zig 全栈运行时。

  1. 本质:不只是更快的 Node.js,是整套 JS 工具链的统一入口。
  2. 性能:启动比 Node 快 3-4 倍,装包比 npm 快 20 倍以上。
  3. 兼容:直接 bun install / bun run 即可运行,现有 Node 项目零修改。
  4. 内建:TypeScript / JSX / TSX 原生支持,无需 Babel 转译或额外配置。
  5. 场景:本地开发、CI 流水线、Serverless 等对冷启动速度敏感的场景。
  6. 建议1.0 之前生产环境慎用,先用作开发工具链加速。
· 3 min read

Tailwind 是构建时按需生成 CSS 的工具,不是预制类库。 这是它和 Bootstrap、iconfont 这类传统 class 库最本质的区别。

  • 本质区别:Bootstrap 是运行时可用的预制 CSS,Tailwind 是构建时扫源码生成
  • 类何时存在:Bootstrap 加载即用,Tailwind 必须被构建器扫到源码才生成
  • 体积策略:Bootstrap 固定(库大小决定),Tailwind 动态(你用多少决定)
  • 跨包坑点:monorepo 子包构建器只扫自己源码,看不到别的包用到的 class
  • 配置关键:tailwind.config.jscontent 必须覆盖到所有源码路径
· 5 min read

git worktree 让多分支并行工作,一个目录 = 一个分支

  • 核心机制:所有 worktree 共享一个 .git 数据库
  • 典型场景:边修 bug 边开发 feature,不切分支
  • code review:独立目录看 PR,不打断当前工作
  • 跑长任务:CI、build 不阻塞主工作区
  • superpowers 模式一个 worktree 一个 agent,并行的关键
  • 使用注意同一分支只能被一个 worktree checkout
  • 清理规则:删目录不够,必须 git worktree remove
· 6 min read

函数组件 re-render 的根因只有一条:引用变了。state 更新、props 变化、父组件渲染、context 值变化——本质上都是"某个引用不等于上一次的引用"。

  • React.memo 决定"要不要渲染":props 浅比较通过就跳过,不通过就走正常流程
  • useCallback / useMemo 保证"引用稳定":让 memo 的浅比较真正生效,否则每次渲染新引用,memo 形同虚设
  • 三者是组合拳:只用 memo 不缓存引用 → 白用;只缓存不用 memo → 也白用
  • 拆分组件 +状态下移 往往比加 memo 更治本:把频繁更新的状态隔离在小范围组件内
  • 列表用 id 做 key,保证增删排序时最小 DOM 更新;纯分页无排序删除可用 index,反而更高效
  • React 19 的 React Compiler 自动处理记忆化,但理解原理仍然是排查性能问题的基础