时光轴
「发表了 17 篇文章」
-
七月 2022
-
七月 22, 2022前端依赖治理
简介 Validate and visualise dependencies. With your rules. JavaScript. TypeScript. CoffeeScript. ES6, CommonJS, AMD. dependency-cruiser，用于前端依赖模块的可视化和依赖的校验，支持使用定制的规则，支持前端常用的 JS、TS 语言以及 ES Module、Comm...
-
二月 2022
-
二月 23, 2022vscode 调试技巧
Web 开发中，大多数人都会习惯在浏览器端调试代码，而借助 vscode，可以带来不一样的调试体验，试想在代码编写处，直接打一个断点，实时 debugger，体验是不是更顺畅了一点？ 以下简单介绍日常 SPA 单页应用、nodejs 应用的调试。 调试 SPA 应用launch 模式1、项目中添加调试配置 操作“运行 - 添加配置”，下拉选择 chrome 自动添加即可，根据需要修改参数值 ...
-
五月 2021
-
五月 29, 2021Charles 抓包/代理 websocket 请求
Charles 中如何抓包、代理 websocket 请求？过程有些复杂、坑点颇多，这里提供一份可用的方案。 请先确保你的 charles 能够抓到浏览器的请求，通常你可能需要注意以下几类问题： 确保已勾选 charles 的 Proxy - macOS Proxy 选项 浏览器推荐设置为“系统代理”，如果使用了某些浏览器的代理插件，请记得切换 是否已安装好 https 证书？ 如果有使用...
-
四月 2021
-
四月 14, 2021Apple M1 芯片问题汇总
使用 Rosetta 打开https://www.macwk.com/article/apple-silicon-m1-application-crash-repair M1 Mac nvm 安装/升级/卸载 最好能够翻墙，并且设置终端可翻墙，否则速度太慢可能断掉。 安装 对于 M1 芯片的 Mac，低版本的 nvm 使用存在一些奇怪的问题，需要卸载后重装最新版本。 curl -o- h...
-
四月 07, 2021Git 非常规问题记录
区分目录指定不同设置在区分企业与个人项目的提交信息时较为常用 # 推荐单独创建配置文件 touch ~/.gitconfig-xx 例如，需要单独设置 username/user-email [user] name = xx email = xxx@gmail.com # 打开 Git 默认的配置文件，添加指定目录下的规则 open ~/.gitconfig 例如，指定 ~/...
-
四月 07, 2021yarn workspaces 依赖安装报错
yarn workspaces 结构的项目，在执行命令安装子包依赖时，可能会看到如下错误： Failed to install dependencies in workspace: expected workspace package to exist yarn issues 下的相关问题讨论：https://github.com/yarnpkg/yarn/issues/7807 目前比较简...
-
三月 2021
-
三月 28, 2021「转」H5直播流原理与实践方案
转自 DuPei 同学的文档，这是比较全面的方案调研，转载分享给更多人，待将来需要时细细研究。 HLS 方案HLS 全称 HTTP Live Streaming，顾名思义是一个基于 HTTP 的流媒体传输协议。是由苹果公司提出，在苹果家族的整个产品都得到了比较好的支持，后来谷歌在 Chrome 浏览器和移动端浏览器也进行了原生支持，所以目前无论你是在 PC 还是移动端的浏览器基本都原生支...
-
三月 27, 2021如何管理应用内的请求?
如何管理应用内的接口请求？ 这是一个值得讨论的问题，涉及如下若干方面： 避免多次调用同一个请求（不同页面或不同组件）？ 失败了自动重试？ 切换浏览器 tab 返回页面时，自动发送请求更新数据？ 列表滚动位置恢复？ ……. 这些问题可以在以下几个社区方案里找到答案（react-query 似乎更胜一筹）： reacrt-query：https://zhuanlan.zhihu.com/p...
-
三月 26, 2021Babel 编译误伤 core-js？
一个不太常见，但很重要的 core-js bug 讨论：https://github.com/zloirock/core-js/issues/514 问题现象core-js 是 es3 的代码，应当是不需要 babel 编译的，但是，因为某种原因（暂不清楚），babel 会对 core-js 进行处理，并且会影响其中的代码，进而会发现 Symbol 在 Android 6.0 等低版本浏览器...
-
九月 2020
-
九月 11, 2020无 eject 重写 CRA 配置 — Craco 详解
内置 craco 扩展配置的 CRA Template，可直接使用。TS 版本：@eleven.fe/cra-template-typescriptES 版本：@eleven.fe/cra-template 使用 CRA 脚手架创建的项目，如果想要修改编译配置，通常可能会选择 npm run eject 弹出配置后魔改。但是，eject 是不可逆操作，弹出配置后，你将无法跟随官方的脚步去...
-
八月 2020
-
八月 26, 20201px 细线实现
采用缩放方案，单条边线好处理一点；如果需要四边都有边线，会有点麻烦，使用缩放方案，虽然可行，但是在部分设备上有间隙问题，建议放弃，或者使用 svg 来做 background-image。 以下是 less/sass 的简单实现示例。 LESS 上边线 1px.border-top(@color) { position: relative; &:before &#...
-
六月 2020
-
六月 11, 2020模块间循环引用问题
有时候可能会遇见这样的场景：模块A引用了模块B里的func1方法，而模块B又引用了模块A里的func2方法。 类似上面的场景，或者其它更复杂的如：A 引用 B，B 引用 C，C 又引用了 A，在不经意间可能会遇到一些诡异问题，如：明明代码没问题，却读不到导入的模块…… 为了更好地避免这样的问题，可以使用 circular-dependency-plugin 插件来做循环引用的检测: 基本用法...
-
六月 11, 2020自动修改 node_moduels 源码
有时候 node_modules 中的第三方包有问题或需要修改几行源码，我们可以怎么办？ 去给作者提 issues？可能得不到回复。 自己在 node_modules 里直接修改源码？下一次重新安装包，或者其他同事 install 的时候，被修改过的源码又恢复如初了。 不用他的包，自己写一个？…… 社区提供了一个工具：patch-package，专门用来处理修改 node_modu...
-
五月 2020
-
五月 10, 2020NPM 包发布指南
准备工作 在 NPM 官网注册账号，https://www.npmjs.com 邮件验证的时候可能需要翻墙访问。 本机安装 nodejs 推荐也安装一下 nrm，方便随时切换 npm 源 sudo npm i nrm -g nrm 常用命令 nrm ls # 查看所有 nrm use [目标源] # 切换至目标源 package.js...
-
三月 2020
-
三月 25, 2020规范 git commit
如何让 git commit 提交时更加规范？例如：vue、angular，如下图。规范化地提交记录，会让将来的回溯查找更容易，也让其他人阅读起来更加简便。 最近读到一篇不错的文章（你可能已经忽略的 git commit 规范），吸取下养分，顺便做个记录。文章介绍得很清楚，建议阅读原文，不做额外赘述，以下为集成到项目的快速指南。 快速指南使用到的工具 commitizen、husky、gi...
-
三月 12, 2020Git Hook 提交时修改版本号
前端项目在 Git 提交时，往往会遗忘更新项目根目录的 package.json 文件的 version，通常不修改也不会有啥问题，但对于强迫症来说，不能忍！咱要改掉它…… 编写一个简单的 node 脚本 check-version.js先安装几个依赖包 yarn add inquirer chalk child_process -D // /scripts/check-version.js...
-
三月 02, 2020Git 命令清单
Git 常用命令做一波整理，方便随时查阅。 主要内容出自阮一峰大佬的科普文章：http://www.ruanyifeng.com/blog/2015/12/git-cheat-sheet.html 。 几个专用名词的译名如下： Workspace：工作区 Index / Stage：暂存区 Repository：仓库区（或本地仓库） Remote：远程仓库 一、新建代码库# 在当前...