【npm】npm ci - npm clean install，在 CI、CD 中保持构建的一致性和可重复性
什么是 npm cinpm ci 与 npm install 类似，主要用于 CI、CD 等自动化环境中，来确保每次安装的依赖项都是相同的。 npm ci 依赖于 package-lock.json 或 npm-shrinkwrap.json，安装之前会删除 node_modules 文件夹（如果存在），若 package-lock.json 中的依赖与 package.json 不一致 npm ci 将会报错退出。 与 npm install 区别 处理 package-lock.json运行 npm ci 必需要 package-lock.json 或 npm-shrinkwrap.json，且不会更新锁文件。在安装时会完全按照 lock 文件版本，若与 package.json 中的版本不匹配则报错。 删...
React Compiler - 解放在函数中编程时的性能焦虑（React Conf 2024）附 Next 在线演示
React Compiler在 2024 的 React Conf 上，React Compiler 正式开源了，早在 2021 的 React Conf 上，由黄玄提出的 React Forget（React without memo）概念，后改名为 React Compiler。 注意 React Compiler 目前仍处于实验阶段，需要 React 19 Beta 不建议在生产中使用~。（可观看在 React Conf 中的介绍） https://react.dev/learn/react-compiler 使用场景（为什么要使用？）在平时开发中，我们经常会因为避免不必要或不是预期的 rerender（props、state、context） 或缓存一些计算结果，而使用 React.memo、useM...
【React】在本地 Html 中快速 debug（调试）React 源码
本地构建 React 环境复制需要 debug 的 React development.js 源码至本地，替换引用即可。 reactstart-a-new-react-project <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Hello World</title> <script src="https://unpkg.com/react@18/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@18/umd/react-dom....
【React】为什么路由跳转时页面滚动高度不会被重置（保留上个页面高度）？理解 history scrollRestoration 的场景与使用，以及如何使用 React Router 重置和跳转前保留滚动高度
平时开发过程中，使用 react router 等单页应用跳转路由时，会发现当前页面在拥有滚动高度时，跳转的下个页面同样会保留上个页面的滚动高度（保留最小滚动高度），或者刷新、前进后退时仍会保留上次的滚动高度。 在某些场景下，我们需要重置滚动高度，比如列表页进入详情页，相反的情况下又需要保留高度。需要确定浏览器对于滚动的处理，可以先看下，其在原生中的滚动场景表现。 哪些场景浏览器会恢复滚动高度？哪些场景会重置高度？下面内容皆为 Chrome 浏览器对于滚动高度的处理测试，请注意时效性和不同设备及浏览器之间的差距。 前置场景与条件html 中能触发滚动的长列表页和详情页（文档滚动），使用 window.location.href 和 history.back() 或 history.go() 等来测试跳转场景下的滚...
【React】结合源码和 EventLoop 分析 - 为什么 useLayoutEffect 会阻止 DOM 重绘（而 useEffect 闪烁）？为什么其内部 useState 会“同步”执行？
useLayoutEffectuseLayoutEffect 与 useEffect 类似，区别是 useLayoutEffect 会在重绘之前同步执行。 为什么会闪烁？可以点击文本 effect 和 layoutEffect 来体验两者在更新时的区别。（增加 delay 同步任务，方便调试） 可以发现两者之间已经区别很小了，但是 useEffect 在更新时仍会出现闪烁。 分析useEffect从 performance 面板中可以看到在 click 事件触发后，直到 delay 函数执行完毕，才有了第一次的 Layout 布局计算，此次更新为 click 中的 setState 更新，在后面的 Task 的 Layout 为 useEffect 中的 setState 更新。 useLayoutE...
使用 Spicetify 自定义 Spotify - 歌词翻译、全屏展示、主题替换
安装 Spicetify安装 Spicetify CLI 和 marketplace（可直接在 Spotify 内更换主题下载插件）。两条命令按序执行。 运行命令过慢或报错？请注意网络环境~ Maccurl -fsSL https://raw.githubusercontent.com/spicetify/cli/main/install.sh | sh # 安装 marketplace curl -fsSL https://raw.githubusercontent.com/spicetify/marketplace/main/resources/install.sh | sh Windows - powershelliwr -useb https://raw.githubusercontent.com/sp...
解决在 webstorm 或 idea 等 jetbrains 工具中遇到 Git 无法 force push，或 force push 灰色禁用无法点击（protected branches）
结论由于你需要操作的分支可能为 github 或你在 IDE 中设置的受保护分支 解决路径：preference => Version Control => Git => Protected branches或者直接搜索 git，直接删除或修改 Protected branches 值即可
使用 pnpm、turborepo 构建 monorepo 项目，changesets 管理日志和版本详解，从零至 github actions（CI）云端缓存 发布 npm 流程
环境与版本 platform => mac os node => v22.2.0 npm => 10.8.0 pnpm => 9.1.3 yarn => 1.22.22 turbo => 1.13.3 changesets => 2.27.5 请注意文档时效和工具版本，浏览前建议查看官方文档，以获得最新信息！ 前置准备 pnpm 使用 workspaceNode corepack 使用pnpm 切换国内镜像源Turorepo 本文档搭配 corepack 更佳~ 还需要掌握 pnpm 的 workspace 相关知识哦~ 快速开始命令初始化pnpm dlx create-turbo@latest 使...
【CSS】解决移动端（高清方案）下在谷歌浏览器中出现 字体大小布局异常，和设置的 font-size 不符（Text Autosizer、Font Boosting）
最近在谷歌浏览器调试移动端高清方案时，发现设置的字体大小竟然和实际显示的字体大小不一致？可以移动端 ua 打开此页面测试下方 demo。fontSize => 设置字体大小；actualSize => 实际展示字体大小 .font-boosting-wrap { } .font-boosting { } .font-boosting li { /*font-size: 22px;*/ } .font-boosting-size-wrap { font-size: 16px; /*text-size-adjust: none;*/ } .font-boosting-button { /*font-size: 22px;*/ } li 的 fontSize: fontSize: actualSize: auto set text-size-adjust ...
【CSS】主流 UI 库都在用的逻辑伪类选择器 not、where、is、has
目前 Css 关于逻辑选择器：:not、:is、:where、:has，除了 :has 比较新以外，其他选择器在一些 UI 库中都有广泛的使用，浏览器基本都已经支持了，一起卷起来，使用更先进的选择器~ :notMDN: :not() CSS 伪类用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中，它也被称为反选伪类（negation pseudo-class）。 <ul class="css-selectors selector-not"> <li>1</li> <li>2</li> <li>3</li> </ul> .selector-not { li:not(:first-child) { border: 1px solid red; } } .css-selectors { margin: 20px auto; width: 50%; border: 1px solid #000; } ...
最新文章
