- 博客(294)
- 资源 (5)
- 收藏
- 关注
RSS订阅原创 Next.js 14 App Router引入 farmer-motion 初始化异常解决，顺带学点知识
是一个非常好用的动画库，当然用来做组件切换和路由切换过渡更不在话下。记录一下，Next.js 14 App Rrouter 下引入初始化异常的解决姿势，顺带扯一下 next.js 的知识点；next.js 提供了两种路由方式，这里大体点一下，具体可以看官网更加详细定义页面层级路由所有组件 React Client Component（客户端组件）只能使用 Next.js 提供的预设规则，例如：文件夹名字即为路径App Router定义应用程式层级的路由。
2024-04-18 13:46:59
953
原创 一个typescript 5 + rollup 4 打包lib模板仓库实现
昨天在写点什么东西的时候，发现有些逻辑可以搞成一个 npm 模块。找了下看看，有没有什么好用现成模板用于开发。。发现并没有；那有需求就解决需求。。
2024-04-17 18:38:39
634
原创 VSCode Webview 插件开发的模板的踩坑记录
上周写了个 vscode 的小插件后，突然想整个 webview 的插件。于是乎开始搜罗相关的资料，开搞！这里记录下几个踩过的坑。
2024-04-15 12:15:36
1571
原创 VS Code开发插件使用 pnpm 打包异常的解决姿势
这个法子也是 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。这里只聚焦错误问题的解决，不是发插件的教程。
2024-04-09 16:42:12
838
原创 PNPM 8管理Node版本，卸载了旧版本Node找不到PNPM
用pnpm env来管理 node 的版本，安装了新版本之后，卸载了之前的旧版本，调用 pnpm 报错。
2024-04-08 20:07:01
623
1
原创 [Github Action]PNPM monorepo docs package部署成Github Page
最近需要把一个前端工程转交出去给其他小伙伴接手；因为一直在内部孵化，基本除了少数维护的几个人可能知根知底；而对于其他人来说一片空白，所以需要提供一个文档体系来辅助别人上手；文档维护采用docusaurus来搭建，代码在Github，所以想把Github Page利用起来；又因为采用monorepo子包的方式维护，看了下社区没有相关部署姿势，就写了这么一篇；
2023-06-05 18:19:22
1093
原创 shell：清理指定目录中指定天数之前的旧文件
我们在服务器运行一些服务经常会产生很多临时文件，而有些临时文件不定期处理很容易就打满了整个磁盘；所以有必要去定期清理，基于这个需求我们就可以搞一个脚本结合crontab或者服务调度这些来使用；值得注意的是，mtime为0的时候，也就是我们想模拟当天，不能带修饰符(+/-在debian和macos执行的表现是没有报错，但是没有任何操作，所以代码里面做了一个区分；
2023-04-23 16:38:46
1475
1
转载 Docker前端工程npm平滑过渡到pnpm v7的姿势
pnpm挺多优点的，比如安装依赖速度很快，命令行也可以少打几个字符；标题为啥说平滑，就是尽可能的少破坏性的迁移【针对现有的工程的改造】，但是又能受用到pnpm的部分特性，使其效益符合我们的期望即可！刚好手头有个Docker运行时的前端工程可以玩玩，感兴趣的可以往下看。
2023-02-28 15:09:29
1252
原创 【Mac】VSCode 更新1.73版本后JS&TS代码跳转异常
今天有小伙伴MacOS更新了VS Code版本后，说工程内的代码跳转全部异常了，没法正确跳转。搞了两三个小时没搞出来，找到了我，让我帮忙瞧瞧。排查下来发现这问题有点意思，故此记录一下。初步猜测是本地工程依赖坏了，重新安装，表现依旧；尝试点击跳转，没有任何反应。继续跟进。
2022-11-03 18:33:25
2636
4
原创 基于NodeJS实现企业微信机器人推送
公司是企业微信协同的，刚好之前搞得CLI报告有输出报告文件的功能；想了想也可以打通这个流程，让沟通成本降低【不用人工转发】；运转流程：生成报告-> 推送文件 -> 企业微信群。再把这个流程接入到自动化执行的流程，就更加人性化了~那么，这里说说如何利用node快速覆盖这个场景！至此一个简易的封装就实现了，若换class来写的，还能写成链式调用的，见仁见智了哈；企业微信机器人还支持图文这些，若是图片是外链可以考虑这种公众号风格的排版。
2022-09-07 18:04:32
1196
原创 yargs 简易指南：撸一个CLI
最近在写一个覆盖公司产品全站页面性能测试的项目，随着代码量逐渐上升，单纯的脚本执行的姿势，使维护成本上去了，代码散落各地，调用要打一大串。所以直接搞成CLI改善使用体验和降低维护成本。这篇文章只聚焦CLI入口的姿势及经验分享。yargs我用下来觉得最大的亮点就是组织性很强，这样命令的维护成本会很低。比如minimist这种就只有纯粹的命令解析，所有判定逻辑需要自己去兜住，校验，同名参数隔离等！
2022-09-05 18:43:02
748
原创 ESBuild压缩CSS引发的一个兼容性Bug的解决姿势
测试小伙伴们在集成测试中反馈了一个问题，Safari 12访问项目个别页面场景样式错乱了。我的第一直觉认为postcss那边处理出了问题，最后发现并不然，且听我道来！
2022-08-04 22:05:21
939
1
原创 Node如何获取pnpm安装的包源码真实代码路径并操作
在改造老工程的包依赖管理的时候，有时候我们想引入一些社区比较好用的包管理；有时候一些阻塞点会阻拦我们，特别我们构建流程可能会拷贝包源码的行为；
2022-08-03 17:49:58
1151
原创 Docker: Alpine Linux升级且安装openssh导致构建凉凉排查修正
前言最近在搞一个迭代，发现开发环境的持续集成有些地方可以优化，但需要动到前端基础镜像；而搞完基础镜像准备用起来的时候，问题就冒出来了。本着不能半途而废的态度，搞起～～问题这边是用Jenkins做持续集成的，用了pipeline语法，所以一般出错都能比较快速感知到某个阶段凉了～排查报错信息就那么点，那就逐句分析～～1. deploy_devopment.sh这是在devops上某个阶段会调用这个脚本去做一些事情，源码大体如下脚本做了这么一些事情，就是用私钥去链接远端服务器。成功后然后判定是
2022-05-27 16:22:06
814
原创 前端多语资源打包及加载的一个可行性方案
前言在一个比较大的项目里面（有国际化需求的），国际化的支持是一个必不可少的；那如何落地就得具体问题具体分析了，这里说说我遇到过并落地的一个改造方案；说说项目背景，是一个迭代多年的产研类项目(整个系统是围绕react生态去研发的)，历史包袱挺多；多种第三方库并存，也有iframe的场景以及自研的插件机制系统（现代沙盒隔离那一套）；方案仅供参考，哈！方案基础信息（技术栈）构建工具流：Gulp 4 + Webpack 4第三方库（lib）momentdayjsganttckedi
2022-01-30 16:23:26
1588
原创 curl快速下载GitHub Repo指定commit的tar.gz
前言有些时候需要下载GitHub仓库的tar.gz来做一些其他操作；这时候可能最常见的就是去GitHub上找release或者tag里面有提供tar.gz的资源；然后点击下载～～但是有些场景可能这种操作就不是很方便了，比如给客户打包源码的；快速指定git的tag或者某个commit_hash , download下来然后对于源码做一些加密什么的，再给到客户现场构建部署～；这时候我们就会考虑以脚本来切入，以配置文件的姿势来录入一些参数，然后快速拿到一些我们需要的资源～这里举一个比较单一的场景来开展
2021-08-12 14:59:42
2743
原创 VS Code的Git Control无法正确识别husky(NVM)问题
前言用了husky 7（.husky) ,里面钩子脚本无法很好的支持vscode git control这个功能环境macnode管理工具（nvm）husky 7问题举个真实场景的????husky 7 初始化后会在工程根目录生成一个.husky目录，她们推荐用脚本来划分不同的钩子拦截，所以我们加一个最常见的(pre-commit)脚本逻辑很简单，就是执行的shell用的sh（这是最通用的shell了），类unix和Linux基本都有内置这个～若是你指定zsh这些，可能其他的环境不一定有
2021-07-22 15:09:17
1658
原创 快速删除工程下所有的node_modules目录
前言就是如何合理又快速的删除某个工程下所有的node_modules目录；其实用shell来解决这个场景就很方便了，都不用装第三方依赖；一般类unix或linux的系统基本自带的两个命令， find rm 效果图这个场景出现在npm 7 workspace 模式下，monorepo的一些包会安装一些自己独特的依赖；这样工程内会存在多个地方有node_modules这个目录;什么时候需要删除？当包依赖发生重大变更的时候，我们就需要一个相对干净的环境去重装依赖，使其能正确安装并且解
2021-07-21 18:40:27
1193
原创 husky 7 + lint-staged 11+ prettier 2 + eslint 7 配置
前言基于最新的一些库来规范项目，比如格式化和提交预处理等～一些库的最新版的配置更加独立了，对于工程化来说，其实更加直观了～围绕react技术栈加入相关门禁来开展文章～效果图git commit 限定pre-commit 门禁一般用于拦截提交之前的暂存区变动，进行相关的门禁检测prettierESLint主要就是代码规范化配置姿势安装相关依赖对于我们真实的业务的，一般来说都有沉淀出自己的一套封装；不管是eslint还是commitizen，不过此处我们直接说一个全新没有任何沉淀的
2021-07-19 18:33:55
1570
原创 Mac M1 10.15+开启允许安装任何来源
前言系统-> 安全与隐私 -> 通用 -> “允许任何来源”这个开启和因特尔芯片的有些差异化；姿势因特尔芯片没有带加密芯片的，一般执行下面就出来了打开终端，以管理员（sudo特权）执行命令sudo spctl --master-disable输入电脑开机密码，然后回车即可看到如果不能如期看到，应该去要关闭SIP,自行引擎搜索吧。若是你能看完整篇，这里就是重启进入到选项，打开终端执行csrutil disable这里到shell的身份堪比linux r.
2021-06-19 15:18:46
6154
1
原创 NPM 7 workspace模式安装依赖执行找不到sentry-cli
前言搜遍了谷歌还有相关Github Repo Issues都没有，npm workspace的资料都不多，有个别都是yarn workspace说什么安装依赖异常，换成国内的淘宝源啊，来来去去都说什么源找不到，一顿操作猛如虎，问题还是没有解决。只能自己摸索了，我的解决姿势感觉应该是全网第一例！系统环境Mac OSNode 14.16.1NPM 7.12.1问题列表sentry-cli ENOENTERROR in Sentry CLI Plugin: spawn /workspace/
2021-05-11 20:49:36
3029
原创 Node脚本快速同步CNPM项目内用到的依赖
前言还是为了解决之前的问题;公司用CNPM作为内部私有仓,没有开启全量实时同步;所以有些包会相对落后,所以常用同步上游就显得很重要了;我想了想,每次都要手动去执行个别的包或者少量包的查询,操作太多了;原理还是遵循CNPM更新机制,可以看看上篇帖子哈~考虑的点设置一个根路径,会自动检索下所有项目的packaeg.json(不包含node_modules)包括所有git subtree或者monorepo的package.json支持延时执行,一瞬间太多要同步的,会把内部搭建cnpm搞崩;
2021-05-02 02:19:19
366
原创 bash 变量跟随#*=,##*=的含义
前言今天看项目的某个打包脚本,里面有这么一段写法…刚看完的时候,我真的一脸茫然~~~代码除了那个*#=都挺好理解的,就是for循环,switch匹配赋值…ARGS="$@"echo ${ARGS}for arg in ${ARGS}do case ${arg} in --packageName=*) echo packageName: ${arg#*=} packageNameArg=${arg#*=} ;;
2021-03-31 14:11:01
1442
原创 utools快速同步cnpm私有仓部分包
前言公司用CNPM作为内部私有仓,没有开启全量实时同步;所以有些包会相对落后,所以常用同步上游就显得很重要了;常规更新打开主页搜索打开CNPM部署的主页,如图搜索进入sync规律更新我只是瞅了瞅,发现触发更新的机制只是发一个put接口;URL直接改参数就是把图片指示区域,浏览器或者接口请求工具都行批量(多个)更新在这里只是单个,那如何批量呢? 我发现它的response返回的是一个数组…那就有点意思了.我猜测query应该支持数组传递的姿势接受参数!果然~~uto
2021-03-30 17:12:26
509
原创 同机多Github账号配置多个SSH
前言有一些情况,我们需要在同一个机子配置多个github的ssh链接;步骤生成多个SSHssh-keygen -t rsa -C "emial"需要注意的就是生成的密钥名字不能一样,接着就是把对应的公钥配置到你的github账号;Github配置路径:avatar(dropdown)->settings->SSH and GPG keys编辑ssh的配置文件在系统当前用户家目录编辑/创建一个SSH配置文件 (~/.ssh/config)Host github.com-cr
2021-03-09 20:47:45
898
原创 NestJS 7.x 折腾记: (6) 异常过滤器,取其精华去其糟粕!比如响应异常数据的包装~
前言正如官方所说:内置的异常层负责处理整个应用程序中的所有抛出的异常。当捕获到未处理的异常时，最终用户将收到友好的响应。NestJS提供了一波拿来即用的内置异常过滤器;在@nestjs/common里面,搜索下Exception就有~我们来一个具体的例子(全局异常过滤),基于内置的异常过滤器实现,采用第三方日志(pino)记录异常日志,做一些处理并包裹返回信息;效果图实战# 基于cli生成filter模板nest g f common/filters/http-exceptionhttp-e
2020-11-16 17:06:43
817
原创 NestJS 7.x 折腾记: (5) 管道,一个好玩的东西!比如入参校验!
前言管道这个词,若是有玩过Linux的小伙伴肯定知晓,比如(看图):意思就git的提交记录以单行显示的前三条,而且提交概要中有build这个词的~在nest里面的管道,主要是用来做入参数据类型的拦截转换;跟ng提供的概念差不多,大同小异~~效果图实战其实官方教程写的挺好了,局部管道和全局管道都写到了,这里我们以更具通用性的入参全局管道做例子,尽量写的更贴近业务和更为粗俗的解释吧~安装# class-validator: 提供非常丰富的类型装饰器# class-transformer: 可以
2020-11-13 17:21:21
962
原创 VS Code 折腾记 - (19) 一些相对实用的编码体验插件(偏前端)
前言天天跟代码打交道,这一年下来我也收集了部分好玩的插件,至少我觉得改善了我的编码体验~有兴趣的可以瞅瞅~~插件集列表拓展名及链接描述File Suggest改善typescript下编码的文件引入提示,用的还不错JS/TS Biscuits这个有点意思,方便我们定位代码块,在闭合端就能感知到!Bracket Lens这个和上面有点类似,但是又有一些差异,很棒的体验~Parameter Hints这个可以把参数类型显性出来,更有IDE的感觉了,我很喜欢这个
2020-11-12 14:18:06
590
原创 NestJS 7.x 折腾记: (4) Swagger接入及相关用法
前言swagger这东东,萝卜青菜各有所爱吧.反正我呆的公司用这个,我用的也还行~~~有兴趣的可以瞅瞅~说说优点吧,可以精确的展示每个字段意义,只要注解写的到位!schema也能正常读取!还能直接测试接口!效果图以下就是配置好及写一些demo接口所展示的效果实战安装# 前者是swagger的nest module,官方团队维护的# 后者是适配express的swagger ui库# 库用新不用旧,语法会有所差异!yarn add @nestjs/swagger swagger-ui-e
2020-11-10 15:20:34
3704
原创 NestJS 7.x 折腾记: (3) 采用nestjs-pino作为Nest logger
前言内置的logger不是很满足个人的需求,所以找了下社区主流的日志实现,从log4js,winston, 到选型pino .是另外两个不好么,那倒不是.萝卜青菜各有所爱吧,pino够轻量,自定义还算丰富,性能还很高!!效果图开发模式INFO [2020-11-09 08:45:12.336 +0000] (56588 on crper-MBP.local): AppController {/api/v1}: context: "RoutesResolver"INFO [
2020-11-09 17:51:59
3401
2
原创 NestJS 7.x 折腾记: (2) 环境变量及配置维护
前言在写后端的时候,我们一般提倡配置文件分离.所以.env就可以很方面来维护我们的环境变量,封装对应的工厂函数也能组合更复杂的配置!比如我们用镜像(Docker),就可以外部映射配置文件目录;达到不同环境使用差异化配置的需求!(运行时加载是允许的!)其他不多说,往下可以看看我的配置分离思路~~实战安装@nestjs/config : 基于dotenv 封装的Nest配置中心joi : 一个很灵活的schema校验工具@types/hapi__joi : joi的typescript声明
2020-11-07 14:02:34
3119
1
原创 NestJS 7.x 折腾记: (1) 项目初始化及常规提交门禁加入
前言系列常规操作,没兴趣的可以跳过这篇水文.写过Angular 2+的小伙伴会有一种天然的熟悉感.因为Nest基本就是同一个思想模式搞得~~实操安装npm i -g @nestjs/cliCLI Help还是熟悉的问题,极具通用性的CLI,可以快速创建各种模块和中间件~ linqunhe@crper-MBP ~/Code neh Usage: nest <command> [options]Options: -v,
2020-11-06 14:31:24
1018
原创 NestJS 7.x 折腾记: (0) 起手式-＞ VS Code 1.5+ Debug NestJS
前言随着7.x的到来,以及VS Code的不断完善.NestJS的断点调试的开启比较容易.效果图配置流程开启自动附加Ctrl(CMD)+Shift+P --> Debug: Toggle Auto Attach常规debug我们都是走inspect模式,所以看你习惯了若是始终开启,有些常规的项目,会频繁报错进程异常Debug(.vscode)若是没有以下这两个文件(初始化),执行F5会报错,然后可以根据引导进去调整.也可以从"显示所有命令进入(cmd+shift+p)",如
2020-11-02 17:56:49
639
原创 Mac/Linux: 一条命令自动递归拉取当前下所有git仓库的代码
前言随着仓库越来越多,特别是公司的一大堆子仓库…每次都要手动fetch或者rebase,对我来说挺痛苦的~~~所以我选择了用脚本来解决我的痛点…效果图注意点仓库需要至少关联一个远程分支拉取的仓库有改动记得提前stash(干净更好)虽然这两个问题没解决也问题不大,只是抛出git的一些异常警告,并不会中断其他仓库的拉取实现代码multiple-git-pull.sh递归匹配#!/bin/zshfind . -type d -name .git -exec sh -c "cd
2020-09-24 16:35:00
1869
2
原创 前后端通讯:非敏感信息Cookie的“强化“之路
前言我们公司鉴权走的是JWT,但是有些数据走Cookie更方便通讯,纵观今天,网上一大把说Cookie不好的文章.但是我们还是要用,那怎么安全一丢丢呢?Cookie的痛点不同浏览器支持的数量不等,比较新的主流浏览器还好信息承载量有限,一般不能超过4kb容易遭受CSRF(跨站请求伪造)等攻击聚焦场景非敏感信息依赖cookie通讯(需要一定的安全性支持)解决姿势CSRF及XSS常规姿势有这么写(请求头):Referer: 判断来源ip或者urlToken: 自定义请求头对比
2020-08-18 17:58:19
475
1
原创 Vue kibana接入及在不同环境下初始上报域(曲线救国)
前言先说说为什么会有这个需求.因为是镜像打包(就是每次构建都是docker),为了保证代码的一致性,我们概要构建方式是:开发环境可以构建,测试环境可以构建.正式环境不允许构建.测试线稳定的代码镜像,只会单纯的拷贝镜像到正式环境直接用!不在正式环境构建,避免不可控!问题背景因为整个技术架构是微服务加微前端,所以链路追踪是必要的,可以快速定位!像前端要接入ELK Stack的套件kibana,上报信息就得安装对应的代理模块!官方文档: Vue integration具体因为上报代理是在项.
2020-08-14 16:18:12
845
1
原创 基于Verdaccio4.x订制包裹推送告警卡片
前言公司Verdaccio私仓彻底用起来了,包括基础组件库和业务组的童鞋们,跑了一个半月,还没有宕过一次.之前基于Jenkins搞了一个消息卡片的,这次迁移过来Verdaccio,包发布的告警行为可以更加单一了效果图旧版Jenkins的效果蓝色区域都是可以点击快速跳转到对应的访问区域;有兴趣的可以翻阅下我之前的文章!基于Verdaccio消息机制点击更多信息就到仓库的对应详情页面Verdaccio配置官方文档: Verdaccio Notifications效果图配置规
2020-07-31 10:46:21
462
原创 Yaml 速成查询表
前言若是接触过编程数据结构的,对这个上手贼快.写过json这些的…主要关注下缩进这些,理解下概念即可!这里只列出非常高频且通用性高的使用姿势,个别骚姿势自行去提案了解!写法及注释值得一提的是:文件首行%YAML version ,可以指定使用yaml的版本键值对的冒号必须跟随空格才是标准的写法,不然会被当初一个字符串!大小写敏感声明的key必须为字符串使用空格缩进(不允许tab)#行开头到行尾为注释区域值允许的类型有str : 字符串int | float: 整形及浮点型li
2020-07-15 14:41:00
446
原创 MacOS:快速配置单体k8s开发环境
前言这里记录下,如何在macos系统上快速搭建一套k8s的开发学习环境;既然快速,那就尽可能减少编译这些行为了.所以用了 brew 来把玩;系统依赖安装kubectl和minikube及helmkubectl: 就是用来控制(配置)kubernetes命令行工具minikube: 可以创建单机版 kubernetes集群helm: k8s的包管理工具brew install kubernetes-cli minikube helm唯一值得注意的可能就是智能提示的配置,因
2020-07-06 15:11:20
1124
原创 Verdaccio私仓搭建的一些注意点和姿势
verdaccio是什么?官网: https://www.verdaccio.org/A lightweight private npm proxy registry一个轻量级的npm中心代理仓库!采用node实现的简单点说,就是npm私有部署仓库,类似npm官方付费的私有仓.搞的动机为什么会搞这个?是想把我们公司的npm私有仓从nexus迁移出来.我们目前和后端共用nexus,因为nexus也能管理maven这些!npm私有仓库独立出来,后续好推向整个公司!!我们这里采用docke
2020-06-17 14:15:09
8297
1
详细介绍Java的内存管理与内存泄露
2012-08-06
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人