crperx_社区达人页

2022年05月

• 05.14 14:12:02
  发表了文章 2022-05-14 14:12:02

  前端多语资源打包及加载的一个可行性方案

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

  
• 05.14 14:09:51
  发表了文章 2022-05-14 14:09:51

  curl快速下载GitHub Repo指定commit的tar.gz

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

  
• 05.14 14:08:18
  发表了文章 2022-05-14 14:08:18

  VS Code的Git Control无法正确识别husky(NVM)问题

  用了husky 7（.husky) ,里面钩子脚本无法很好的支持vscode git control这个功能

  
• 05.14 14:07:04
  发表了文章 2022-05-14 14:07:04

  快速删除工程下所有的node_modules目录

  就是如何合理又快速的删除某个工程下所有的node_modules目录； 其实用shell来解决这个场景就很方便了，都不用装第三方依赖； 一般类unix或linux的系统基本自带的两个命令， find rm

  
• 05.14 14:06:13
  发表了文章 2022-05-14 14:06:13

  Mac M1 10.15+开启允许安装任何来源

  系统-> 安全与隐私 -> 通用 -> “允许任何来源” 这个开启和因特尔芯片的有些差异化；

  
• 05.14 14:04:57
  发表了文章 2022-05-14 14:04:57

  NPM 7 workspace模式安装依赖执行找不到sentry-cli

  搜遍了谷歌还有相关Github Repo Issues都没有， npm workspace的资料都不多， 有个别都是yarn workspace说什么安装依赖异常， 换成国内的淘宝源啊，来来去去都说什么源找不到， 一顿操作猛如虎，问题还是没有解决。 只能自己摸索了，我的解决姿势感觉应该是全网第一例！

  
• 05.14 14:03:02
  发表了文章 2022-05-14 14:03:02

  Node脚本快速同步CNPM项目内用到的依赖

  还是为了解决之前的问题; 公司用CNPM作为内部私有仓,没有开启全量实时同步; 所以有些包会相对落后,所以常用同步上游就显得很重要了; 我想了想,每次都要手动去执行个别的包或者少量包的查询,操作太多了; 原理还是遵循CNPM更新机制,可以看看上篇帖子哈~

  
• 05.14 14:01:41
  发表了文章 2022-05-14 14:01:41

  bash 变量跟随#*=,##*=的含义

  今天看项目的某个打包脚本,里面有这么一段写法... 刚看完的时候,我真的一脸茫然~~~

  
• 05.14 13:58:27
  发表了文章 2022-05-14 13:58:27

  utools快速同步cnpm私有仓部分包

  公司用CNPM作为内部私有仓,没有开启全量实时同步; 所以有些包会相对落后,所以常用同步上游就显得很重要了;

  
• 05.14 13:57:04
  发表了文章 2022-05-14 13:57:04

  同机多Github账号配置多个SSH

  有一些情况,我们需要在同一个机子配置多个github的ssh链接;

  
• 05.14 13:51:06
  发表了文章 2022-05-14 13:51:06

  NestJS 7.x 折腾记: (6) 异常过滤器,取其精华去其糟粕!比如响应异常数据的包装~

  正如官方所说: 内置的异常层负责处理整个应用程序中的所有抛出的异常。 当捕获到未处理的异常时，最终用户将收到友好的响应。

  
• 05.14 13:49:44
  发表了文章 2022-05-14 13:49:44

  NestJS 7.x 折腾记: (5) 管道,一个好玩的东西!比如入参校验!

  管道这个词,若是有玩过Linux的小伙伴肯定知晓,比如(看图): 意思就git的提交记录以单行显示的前三条,而且提交概要中有build这个词的~ 在nest里面的管道,主要是用来做入参数据类型的拦截转换; 跟ng提供的概念差不多,大同小异~~

  
• 05.14 13:48:02
  发表了文章 2022-05-14 13:48:02

  VS Code 折腾记 - (19) 一些相对实用的编码体验插件(偏前端)

  天天跟代码打交道, 这一年下来我也收集了部分好玩的插件, 至少我觉得改善了我的编码体验~ 有兴趣的可以瞅瞅~~

  
• 05.14 13:46:49
  发表了文章 2022-05-14 13:46:49

  NestJS 7.x 折腾记: (4) Swagger接入及相关用法

  swagger这东东,萝卜青菜各有所爱吧. 反正我呆的公司用这个,我用的也还行! 有兴趣的可以瞅瞅~ 说说优点吧, 可以精确的展示每个字段意义,只要注解写的到位! schema也能正常读取!还能直接测试接口!

  
• 05.14 13:44:48
  发表了文章 2022-05-14 13:44:48

  NestJS 7.x 折腾记: (3) 采用nestjs-pino作为Nest logger

  内置的logger不是很满足个人的需求, 所以找了下社区主流的日志实现, 从log4js,winston, 到选型pino . 是另外两个不好么,那倒不是. 萝卜青菜各有所爱吧, pino够轻量,自定义还算丰富,性能还很高!!

  
• 05.14 13:42:55
  发表了文章 2022-05-14 13:42:55

  NestJS 7.x 折腾记: (2) 环境变量及配置维护

  在写后端的时候,我们一般提倡配置文件分离. 所以.env就可以很方面来维护我们的环境变量, 封装对应的工厂函数也能组合更复杂的配置! 比如我们用镜像(Docker),就可以外部映射配置文件目录; 达到不同环境使用差异化配置的需求!(运行时加载是允许的!) 其他不多说,往下可以看看我的配置分离思路~~

  
• 05.14 13:40:24
  发表了文章 2022-05-14 13:40:24

  NestJS 7.x 折腾记: (1) 项目初始化及常规提交门禁加入

  系列常规操作,没兴趣的可以跳过这篇水文. 写过Angular 2+的小伙伴会有一种天然的熟悉感. 因为Nest基本就是同一个思想模式搞得~~

  
• 05.14 13:38:53
  发表了文章 2022-05-14 13:38:53

  NestJS 7.x 折腾记: (0) 起手式-> VS Code 1.5+ Debug NestJS

  随着7.x的到来,以及VS Code的不断完善. NestJS的断点调试的开启比较容易.

  
• 05.14 13:37:45
  发表了文章 2022-05-14 13:37:45

  Mac/Linux: 一条命令自动递归拉取当前下所有git仓库的代码

  随着仓库越来越多,特别是公司的一大堆子仓库.... 每次都要手动fetch或者rebase, 对我来说挺痛苦的~~~ 所以我选择了用脚本来解决我的痛点... 第二版(2020-11-26): www.yuque.com/crper/blog/…

  
• 05.14 13:31:27
  发表了文章 2022-05-14 13:31:27

  前后端通讯:非敏感信息Cookie的"强化"之路

  我们公司鉴权走的是JWT, 但是有些数据走Cookie更方便通讯, 纵观今天,网上一大把说Cookie不好的文章. 但是我们还是要用,那怎么安全一丢丢呢?

  
• 05.14 13:29:56
  发表了文章 2022-05-14 13:29:56

  Vue kibana接入及在不同环境下初始上报域(曲线救国)

  先说说为什么会有这个需求. 因为我们代码是镜像打包, 镜像只包含编译后的代码! 为了保证代码的一致性, 我们概要构建方式是: 开发环境可以构建, 测试环境可以构建. 正式环境不允许构建. 测试线稳定的代码镜像, 只会单纯的拷贝镜像到正式环境直接用! 不在正式环境构建,避免不可控!

  
• 05.14 13:28:07
  发表了文章 2022-05-14 13:28:07

  基于Verdaccio4.x订制包裹推送告警卡片

  公司Verdaccio私仓彻底用起来了, 包括基础组件库和业务组的童鞋们, 跑了一个半月,还没有宕过一次. 之前基于Jenkins搞了一个消息卡片的, 这次迁移过来Verdaccio, 包发布的告警行为可以更加单一了

  
• 05.14 13:26:42
  发表了文章 2022-05-14 13:26:42

  Yaml 速成查询表

  若是接触过编程数据结构的,对这个上手贼快. 写过json这些的...主要关注下缩进这些,理解下概念即可! 这里只列出非常高频且通用性高的使用姿势,个别骚姿势自行去提案了解!

  
• 05.14 13:25:27
  发表了文章 2022-05-14 13:25:27

  MacOS:快速配置单体k8s开发环境

  记录下我们如何在MacOS上快速搭建一套k8s的开发学习环境; 既然快速,那就尽可能减少编译这些行为了. 所以用了 brew 来把玩;

  
• 05.14 13:24:13
  发表了文章 2022-05-14 13:24:13

  Verdaccio私仓搭建的一些注意点和姿势

  为什么会搞这个? 是想把我们公司的npm私有仓从nexus迁移出来. 我们目前和后端共用nexus,因为nexus也能管理maven这些! npm私有仓库独立出来,后续好推向整个公司!! 我们这里采用docker自己部署(用的是v4.6.x),方便后续滚动更新. 配置文件及模块缓存目录是从外部映射进去,维护比较弹性 外网访问是通过nginx代理,内网集群是通过安全组策略授权.

  
• 05.14 13:21:14
  发表了文章 2022-05-14 13:21:14

  Vue 2.x使用ant-design-vue 1.6.2版本,jsx写法下弹出组件报ant-portal指令异常解决姿势

  今天遇到这个问题,我觉得有必要放出来. 应该会有人遇到和我一样的问题, 毕竟ant-design-vue的用户群体还是挺多的~~

  
• 05.14 13:20:01
  发表了文章 2022-05-14 13:20:01

  VS Code 折腾记 - (18) 运维及持续集成相关的拓展推荐

  工程化一路走到底,必不可少要接触后端和CI/CD; 所以相关的技术都要有所了解. 比如K8S,Jenkins,Nginx,Docker,SQL等等. 我就以我们公司内的技术栈来整理会用到的; 其他不多说,我们直入主题!!

  
• 05.14 13:19:11
  发表了文章 2022-05-14 13:19:11

  编程字体推荐

  对于编码的我们，一个赏心悦目的字体，可以愉悦身心。 以下是我推荐一波等宽字体，有兴趣的可以装一波。

  
• 05.14 13:17:50
  发表了文章 2022-05-14 13:17:50

  Node版本及源管理

  Node 版本推荐用最新的lts版本(目前12.x), 尝鲜可以用current版本(一般比稳定版超前一个大版本)

  
• 05.14 13:16:05
  发表了文章 2022-05-14 13:16:05

  VS Code 折腾记 - (17) Debug for Chrome(附加模式[支持浏览器插件的使用])

  很早以前就撸过一篇帖子,也是说这个的,但是那时候只是用最傻瓜化的直白的姿势. 新窗口模式,而且配置文件用的是临时文件,拓展这些更是不能用. 用起来感觉不是很好,但时隔一年多,不管是vscode还是当初的插件都完善了很多. 研究了下附加模式,并让拓展也能正常使用的姿势(挺简单的). 用到的插件VSCode插件:

  
• 05.14 13:14:27
  发表了文章 2022-05-14 13:14:27

  MacOS 10.15: 修正typora无法输入问题

  最近把系统更新到了10.15,发现 typora 没法输入了， 一开始以为是 typora 的 bug，慢慢坐等更新， 放了一个月，更新了 typora 推送的版本也无效。 这就没法接受了！！必须排查下~~

  
• 05.12 15:33:59
  发表了文章 2022-05-12 15:33:59

  Jenkins构建信息推送钉钉(个人定制)

  公司内部持续集成用的Jenkins,办公通讯用的钉钉,代码维护用的GitLab。 持续集成的构建详情在日常开发中需要频繁查看，过程是否报错,提交的概要。 但是旧有的版本流程，只有记录了合入主干的时侯，输出一个签入签出的文本， 所以有时候还需要借助运维大佬帮忙找为毛失败，很浪费大伙的时间，成本太高。 所以我就在想,如何简化这个过程,让效率更高。 当看到钉钉支持卡片化和 markdown 化推送信息的时侯，我就知道游戏开始了。

  
• 05.12 15:31:09
  发表了文章 2022-05-12 15:31:09

  Markdown上手指南

  markdown 是一门很实用的标记语言，若是有HTML 基础学起来会非常快。 演示效果均是从typora 展示的,为什么用它，因为它是一个成熟的 md 编辑器！ • markdown 所见即所得, 部分还增加了人性化的交互(比如代码高亮) • 支持公式 • 支持大部分的拓展语法 • 支持主流的流程图渲染

  
• 05.12 15:27:32
  发表了文章 2022-05-12 15:27:32

  高频使用的 Git 命令

  汇总下我在项目中高频使用的git命令及姿势。 不是入门文档，官方文档肯定比我全面，这里是结合实际业务场景输出。 使用的 Git版本：git version 2.24.0

  
• 05.12 15:25:10
  发表了文章 2022-05-12 15:25:10

  debian : root exec npm install throw err

  npm cli 参数 npm unsfae-perm , npm install unsafe-perm 官方的说明就是若是以 root 用户来执行unsafe-perm默认为 false,反之开启。 而我们 Linux 上的用户更多的是用 sudo 来临时赋予管理员的权限，用户有时候走 nobody,有时候走自定义的用户。

  
• 05.12 15:24:10
  发表了文章 2022-05-12 15:24:10

  ES6字符串模板多行清除行头空格制表符

  最近在撸项目工程化的时侯，需要输出一些文案提示， 对于多行文本我肯定优先考虑用 ES6字符串模板来实现，直接使用的效果并不是很符合想要的。 因为字符串模板会默认保留你换行的格式，包括缩进这些。

  
• 05.12 15:21:59
  发表了文章 2022-05-12 15:21:59

  Git:使用GPG签名Commit

  GPG从诞生开始，目的就是为了加密而存在。到如今的 git，用 GPG 来签名 commit , 可以保证我们提交不被篡改（当然密钥暴露就另当别论了！）

  
• 05.12 15:18:49
  发表了文章 2022-05-12 15:18:49

  Sass准备推出更人性化的模块系统

  Sass just launched a major new feature you might recognize from other languages: a module system. This is a big step forward for @import. one of the most-used Sass-features. While the current @import rule allows you to pull in third-party packages, and split your Sass into manageable "partia

  
• 05.12 15:14:44
  发表了文章 2022-05-12 15:14:44

  XCode升级到版本11终端出现的魔性问题修正

  概率性出现？因为我不敢保证所有人都有这个问题，而我就遇到了这个问题（100%）。 而这个问题偏偏是我在升级xcode之后才出现的

  
• 05.12 15:13:30
  发表了文章 2022-05-12 15:13:30

  axios 0.19.x不发起请求的问题解决姿势

  使用axios遇到的一个问题，就是拦截器可以打印出 config ,但是不发起请求。 控制台也不报错，编译终端也不报错，很迷。

  
• 05.12 15:06:43
  发表了文章 2022-05-12 15:06:43

  Webpack 4 动态切割JS注入文件名

  昨天重新把我们公司的引流页做了二重封装，遇到一个问题。 webpack 切割的时候如何加个可以跟随文件名变化的前缀。

  
• 05.12 15:05:41
  发表了文章 2022-05-12 15:05:41

  Vue 2.x折腾记 - (22) Vue 打包图片在safari不显示的问题

  图片不显示这个问题在safari上会出现，不管是PC还是手机端，而其他浏览器是可以正常预览

  
• 05.12 15:04:27
  发表了文章 2022-05-12 15:04:27

  Vue 2.x折腾记 - (21) CNZZ统计在引流页中的应用姿势

  因为单页面开发，所以统计代码的封装和考虑点是我们需要着手设计的(比如维护性）。 cnzz提供的js注入有四种方式，如下

  
• 05.12 15:03:02
  发表了文章 2022-05-12 15:03:02

  Vue 2.x折腾记 - (20) JSX在业务中的具体实践以及跟React书写的差异化

  Vue JSX：让Vue支持JSX来书写代码的一个开发构建依赖。 最近已经到1.0 正式版了，稍微梳理下，就落实到具体业务去尝试。 更多的姿势可以看上面仓库的README，这里只说说我用到的。

  
• 05.12 15:01:41
  发表了文章 2022-05-12 15:01:41

  Vue 2.x折腾记 - (19) 基于Antd Design Vue 封装一个符合业务的树形组件

  仔细翻了下对应的文档(antd vue)，发现有那么一个树形控件，但是没有上面部分全局控制的功能。 那么只能自己动手改造出一个符合业务的了，有兴趣的看官可以瞅瞅。

  
• 05.12 14:59:59
  发表了文章 2022-05-12 14:59:59

  Vue 2.x折腾记 - (18) 用Vue的Inject Provide结合Event Bus来实现局部的状态维护

  原型有个东西，看着是几个功能组件的组合体； 想拆分成对应的组件(全部写在一起是贼恐怖的事情)，又不想用Vuex这类来实现。 那最终的方案就是Vue的eventbus了, 这只是一种方案的实现。 具体业务请具体分析是否可以用这个来维护多组件数据的

  
• 05.12 14:58:44
  发表了文章 2022-05-12 14:58:44

  Vue 2.x折腾记 - (17) 基于Ant Design Vue 封装一个配置式的表单组件

  写了个类似上篇搜索的封装，但是要考虑的东西更多。 具体业务比展示的代码要复杂，篇幅太长就不引入了。

  
• 05.12 14:57:04
  发表了文章 2022-05-12 14:57:04

  Vue 2.x折腾记 - (16) 基于Ant Design Vue 封装一个配置式的表单搜索组件

  这次的后台管理系统项目选型用了Vue来作为主技术栈； 因为前段时间用过React来写过项目(用了antd)，感觉棒棒的。 所以这次就排除了Element UI,而采用了Ant Design Vue; 在分析整个项目原型后，发现又可以抽离类似之前的React表格搜索组件

  
• 05.12 14:54:46
  发表了文章 2022-05-12 14:54:46

  Vue 2.x折腾记 - (15) 捣鼓一个中规中矩loading组件

  最近有一个新的项目，UI大佬不知道从哪里找来了一张GIF丢到蓝湖， 说作为全局的页面loading ，但是自己想了想，还是选择画一个。 一开始想过用svg,canvas,最终还是选择了css3+js来实现这个效果。 gif的缺点挺多,至于为什么又排除了svg和canvas，是因为css3+js可控性更强， 不管是大小还是颜色，还是响应式(我的项目走的vh,vw)那套来适配；

  
• 05.12 14:53:05
  发表了文章 2022-05-12 14:53:05

  Canvas绘制一个类似老版支付宝信用分仪表盘效果

  使用了ESM+TS的风格来写一个类似老版本支付宝信用分的效果(会动!!!)； 一开始用的是普通的ES5+的风格来写，这两版的代码都会展示， 模块的版本增加了一些细节的考虑，有兴趣的看官可以看看