CRPER

摘要：参数工坊（QueryCraft）是一款专为URL参数编辑设计的浏览器扩展工具。它提供可视化界面解析和编辑URL参数，支持新增/删除参数、修改值、参数排序等功能，可一键生成完整URL或仅查询字符串。工具还包含实时预览、二维码生成、多格式复制（包括JSON结构）等实用功能，支持弹窗和侧边栏双形态操作，具备国际化（中/英文）和主题切换特性。适用于前后端调试、接口测试、活动链接生成等场景，帮助开发者高效处理URL参数问题。该插件已上架Chrome应用商店。

是一个非常好用的动画库，当然用来做组件切换和路由切换过渡更不在话下。记录一下，Next.js 14 App Rrouter 下引入初始化异常的解决姿势，顺带扯一下 next.js 的知识点；next.js 提供了两种路由方式，这里大体点一下，具体可以看官网更加详细定义页面层级路由所有组件 React Client Component（客户端组件）只能使用 Next.js 提供的预设规则，例如：文件夹名字即为路径App Router定义应用程式层级的路由。

昨天在写点什么东西的时候，发现有些逻辑可以搞成一个 npm 模块。找了下看看，有没有什么好用现成模板用于开发。。发现并没有；那有需求就解决需求。。

上周写了个 vscode 的小插件后，突然想整个 webview 的插件。于是乎开始搜罗相关的资料，开搞！这里记录下几个踩过的坑。

这个法子也是 issue 里面好心人给的法子: https://github.com/microsoft/vscode-vsce/issues/421#issuecomment-1038911725。官方仓库的相关 issue 讨论：https://github.com/microsoft/vscode-vsce/issues/421。○ 这个包已经给官方标记废弃了，推荐使用 https://www.npmjs.com/package/@vscode/vsce。这里只聚焦错误问题的解决，不是发插件的教程。

用pnpm env来管理 node 的版本，安装了新版本之后，卸载了之前的旧版本，调用 pnpm 报错。

最近需要把一个前端工程转交出去给其他小伙伴接手；因为一直在内部孵化，基本除了少数维护的几个人可能知根知底；而对于其他人来说一片空白，所以需要提供一个文档体系来辅助别人上手；文档维护采用docusaurus来搭建，代码在Github，所以想把Github Page利用起来；又因为采用monorepo子包的方式维护，看了下社区没有相关部署姿势，就写了这么一篇；

我们在服务器运行一些服务经常会产生很多临时文件，而有些临时文件不定期处理很容易就打满了整个磁盘；所以有必要去定期清理，基于这个需求我们就可以搞一个脚本结合crontab或者服务调度这些来使用；值得注意的是，mtime为0的时候，也就是我们想模拟当天，不能带修饰符(+/-在debian和macos执行的表现是没有报错，但是没有任何操作，所以代码里面做了一个区分；

pnpm挺多优点的，比如安装依赖速度很快，命令行也可以少打几个字符；标题为啥说平滑，就是尽可能的少破坏性的迁移【针对现有的工程的改造】，但是又能受用到pnpm的部分特性，使其效益符合我们的期望即可！刚好手头有个Docker运行时的前端工程可以玩玩，感兴趣的可以往下看。

今天有小伙伴MacOS更新了VS Code版本后，说工程内的代码跳转全部异常了，没法正确跳转。搞了两三个小时没搞出来，找到了我，让我帮忙瞧瞧。排查下来发现这问题有点意思，故此记录一下。初步猜测是本地工程依赖坏了，重新安装，表现依旧；尝试点击跳转，没有任何反应。继续跟进。

公司是企业微信协同的，刚好之前搞得CLI报告有输出报告文件的功能；想了想也可以打通这个流程，让沟通成本降低【不用人工转发】；运转流程：生成报告-> 推送文件 -> 企业微信群。再把这个流程接入到自动化执行的流程，就更加人性化了~那么，这里说说如何利用node快速覆盖这个场景！至此一个简易的封装就实现了，若换class来写的，还能写成链式调用的，见仁见智了哈；企业微信机器人还支持图文这些，若是图片是外链可以考虑这种公众号风格的排版。

最近在写一个覆盖公司产品全站页面性能测试的项目，随着代码量逐渐上升，单纯的脚本执行的姿势，使维护成本上去了，代码散落各地，调用要打一大串。所以直接搞成CLI改善使用体验和降低维护成本。这篇文章只聚焦CLI入口的姿势及经验分享。yargs我用下来觉得最大的亮点就是组织性很强，这样命令的维护成本会很低。比如minimist这种就只有纯粹的命令解析，所有判定逻辑需要自己去兜住，校验，同名参数隔离等！

测试小伙伴们在集成测试中反馈了一个问题，Safari 12访问项目个别页面场景样式错乱了。我的第一直觉认为postcss那边处理出了问题，最后发现并不然，且听我道来！

在改造老工程的包依赖管理的时候，有时候我们想引入一些社区比较好用的包管理；有时候一些阻塞点会阻拦我们，特别我们构建流程可能会拷贝包源码的行为；

前言最近在搞一个迭代，发现开发环境的持续集成有些地方可以优化，但需要动到前端基础镜像；而搞完基础镜像准备用起来的时候，问题就冒出来了。本着不能半途而废的态度，搞起～～问题这边是用Jenkins做持续集成的，用了pipeline语法，所以一般出错都能比较快速感知到某个阶段凉了～排查报错信息就那么点，那就逐句分析～～1. deploy_devopment.sh这是在devops上某个阶段会调用这个脚本去做一些事情，源码大体如下脚本做了这么一些事情，就是用私钥去链接远端服务器。成功后然后判定是

前言在一个比较大的项目里面（有国际化需求的），国际化的支持是一个必不可少的；那如何落地就得具体问题具体分析了，这里说说我遇到过并落地的一个改造方案；​说说项目背景，是一个迭代多年的产研类项目(整个系统是围绕react生态去研发的)，历史包袱挺多；多种第三方库并存，也有iframe的场景以及自研的插件机制系统（现代沙盒隔离那一套）；方案仅供参考，哈！方案基础信息（技术栈）构建工具流：Gulp 4 + Webpack 4第三方库（lib）momentdayjsganttckedi

前言用了husky 7（.husky) ,里面钩子脚本无法很好的支持vscode git control这个功能环境macnode管理工具（nvm）husky 7问题举个真实场景的????husky 7 初始化后会在工程根目录生成一个.husky目录，她们推荐用脚本来划分不同的钩子拦截，所以我们加一个最常见的(pre-commit)脚本逻辑很简单，就是执行的shell用的sh（这是最通用的shell了），类unix和Linux基本都有内置这个～若是你指定zsh这些，可能其他的环境不一定有

前言有些时候需要下载GitHub仓库的tar.gz来做一些其他操作；这时候可能最常见的就是去GitHub上找release或者tag里面有提供tar.gz的资源；然后点击下载～～但是有些场景可能这种操作就不是很方便了，比如给客户打包源码的；快速指定git的tag或者某个commit_hash , download下来然后对于源码做一些加密什么的，再给到客户现场构建部署～；​这时候我们就会考虑以脚本来切入，以配置文件的姿势来录入一些参数，然后快速拿到一些我们需要的资源～​这里举一个比较单一的场景来开展

前言就是如何合理又快速的删除某个工程下所有的node_modules目录；其实用shell来解决这个场景就很方便了，都不用装第三方依赖；一般类unix或linux的系统基本自带的两个命令， find rm 效果图这个场景出现在npm 7 workspace 模式下，monorepo的一些包会安装一些自己独特的依赖；这样工程内会存在多个地方有node_modules这个目录;什么时候需要删除？当包依赖发生重大变更的时候，我们就需要一个相对干净的环境去重装依赖，使其能正确安装并且解