前端工程化
文章平均质量分 84
crper
对设计、交互、产品都有自己的见解和追求;更多关于我:https://www.yuque.com/crper/blog/about_me
展开
-
[Github Action]PNPM monorepo docs package部署成Github Page
最近需要把一个前端工程转交出去给其他小伙伴接手;因为一直在内部孵化,基本除了少数维护的几个人可能知根知底;而对于其他人来说一片空白,所以需要提供一个文档体系来辅助别人上手;文档维护采用docusaurus来搭建,代码在Github,所以想把Github Page利用起来;又因为采用monorepo子包的方式维护,看了下社区没有相关部署姿势,就写了这么一篇;原创 2023-06-05 18:19:22 · 1068 阅读 · 0 评论 -
Docker前端工程npm平滑过渡到pnpm v7的姿势
pnpm挺多优点的,比如安装依赖速度很快,命令行也可以少打几个字符;标题为啥说平滑,就是尽可能的少破坏性的迁移【针对现有的工程的改造】,但是又能受用到pnpm的部分特性,使其效益符合我们的期望即可!刚好手头有个Docker运行时的前端工程可以玩玩,感兴趣的可以往下看。转载 2023-02-28 15:09:29 · 1215 阅读 · 0 评论 -
基于NodeJS实现企业微信机器人推送
公司是企业微信协同的,刚好之前搞得CLI报告有输出报告文件的功能;想了想也可以打通这个流程,让沟通成本降低【不用人工转发】;运转流程:生成报告-> 推送文件 -> 企业微信群。再把这个流程接入到自动化执行的流程,就更加人性化了~那么,这里说说如何利用node快速覆盖这个场景!至此一个简易的封装就实现了,若换class来写的,还能写成链式调用的,见仁见智了哈;企业微信机器人还支持图文这些,若是图片是外链可以考虑这种公众号风格的排版。原创 2022-09-07 18:04:32 · 1129 阅读 · 0 评论 -
yargs 简易指南:撸一个CLI
最近在写一个覆盖公司产品全站页面性能测试的项目,随着代码量逐渐上升,单纯的脚本执行的姿势,使维护成本上去了,代码散落各地,调用要打一大串。所以直接搞成CLI改善使用体验和降低维护成本。这篇文章只聚焦CLI入口的姿势及经验分享。yargs我用下来觉得最大的亮点就是组织性很强,这样命令的维护成本会很低。比如minimist这种就只有纯粹的命令解析,所有判定逻辑需要自己去兜住,校验,同名参数隔离等!原创 2022-09-05 18:43:02 · 710 阅读 · 0 评论 -
ESBuild压缩CSS引发的一个兼容性Bug的解决姿势
测试小伙伴们在集成测试中反馈了一个问题,Safari 12访问项目个别页面场景样式错乱了。我的第一直觉认为postcss那边处理出了问题,最后发现并不然,且听我道来!原创 2022-08-04 22:05:21 · 905 阅读 · 1 评论 -
Node如何获取pnpm安装的包源码真实代码路径并操作
在改造老工程的包依赖管理的时候,有时候我们想引入一些社区比较好用的包管理;有时候一些阻塞点会阻拦我们,特别我们构建流程可能会拷贝包源码的行为;原创 2022-08-03 17:49:58 · 1122 阅读 · 0 评论 -
前端多语资源打包及加载的一个可行性方案
前言在一个比较大的项目里面(有国际化需求的),国际化的支持是一个必不可少的;那如何落地就得具体问题具体分析了,这里说说我遇到过并落地的一个改造方案;说说项目背景,是一个迭代多年的产研类项目(整个系统是围绕react生态去研发的),历史包袱挺多;多种第三方库并存,也有iframe的场景以及自研的插件机制系统(现代沙盒隔离那一套);方案仅供参考,哈!方案基础信息(技术栈)构建工具流:Gulp 4 + Webpack 4第三方库(lib)momentdayjsganttckedi原创 2022-01-30 16:23:26 · 1564 阅读 · 0 评论 -
husky 7 + lint-staged 11+ prettier 2 + eslint 7 配置
前言基于最新的一些库来规范项目,比如格式化和提交预处理等~一些库的最新版的配置更加独立了,对于工程化来说,其实更加直观了~围绕react技术栈加入相关门禁来开展文章~效果图git commit 限定pre-commit 门禁一般用于拦截提交之前的暂存区变动,进行相关的门禁检测prettierESLint主要就是代码规范化配置姿势安装相关依赖对于我们真实的业务的,一般来说都有沉淀出自己的一套封装;不管是eslint还是commitizen,不过此处我们直接说一个全新没有任何沉淀的原创 2021-07-19 18:33:55 · 1539 阅读 · 0 评论