- 博客(109)
- 收藏
- 关注
RSS订阅原创 为React组件库引入自动化测试：从零到完善的实践之路
文章详细介绍了如何为React+TypeScript业务组件库引入自动化测试的全过程，包括测试环境搭建、Jest配置、特殊依赖处理、测试用例设计，以及测试覆盖率配置和报告分析。
2025-05-05 20:46:12
710
原创 构建模块化 CLI：Lerna + Commander 打造灵活的基础脚手架
介绍如何使用 Lerna 管理多包结构，结合 Commander 创建一个可扩展的基础 CLI 脚手架。
2024-12-22 20:22:31
772
原创 命令行应用开发初学者指南：脚手架篇、UI 库和交互工具
本篇文章介绍了几个常用的命令行工具和库，帮助开发者构建功能丰富、用户友好的命令行应用。主要内容包括：脚手架框架（yargs 和 commander）、命令行输出美化（ANSI Escape 规范、chalk、ora）、交互式命令行（inquirer）。
2024-11-27 21:18:51
1270
原创 Node.js 构建命令行工具：实现 ls 命令的 -a 和 -l 选项
本篇文章来和大家分享一下如何用 Node.js 实现一个简单的命令行工具，模仿常用的 ls 命令，包括其 -a 和 -l 参数的功能。
2024-11-10 21:59:30
1198
原创 重构案例：将纯HTML/JS项目迁移到Webpack
本文详细介绍了如何将传统的纯 HTML/JS 项目重构为使用 Webpack 的现代前端项目。通过模块化管理和代码分割优化了项目，并使用 EJS 抽离公共组件，提升了性能和可维护性。
2024-10-20 20:24:41
1454
原创 前端模块化进化史：从全局 function 到 ES Modules
随着前端开发的不断进步，模块化已成为现代Web应用中不可或缺的重要组成部分。在这篇文章中，我们将一起回顾前端模块化的历程，从最早的全局函数到今天广为采用的ES Modules，探索每一阶段的技术演变及其背后的意义。
2024-10-07 20:13:31
1250
原创 React+TypeScript 组件库开发全攻略：集成Storybook可视化与Jest测试，一键发布至npm
平时我除了业务需求，偶尔会投入到UI组件的开发中，大多数时候只会负责自己业务场景相关或者一小部分公共组件，极少有从创建项目、集成可视化、测试到发布的整个过程的操作，这篇文章就是记录组件开发全流程，UI组件在此仅作为调试用，重点在于集成项目环境。
2024-07-21 21:13:58
900
原创 轻松实现H5页面下拉刷新：滑动触发、高度提示与数据刷新全攻略
前段时间在做小程序到H5的迁移，其中小程序中下拉刷新的功能引起了产品的注意。他说到，哎，我们迁移后的H5页面怎么没有下拉刷新，于是乎，我就急忙将这部分的内容给填上。本来是计划使用成熟的组件库来实现，尝试之后发现这些组件和我们H5页面的其他逻辑有冲突（H5还有吸顶、锚点、滑动高亮、横向滚动），小小H5页面上承载了太多的功能，兼容起来非常麻烦，想着下拉刷新功能也不复杂，干脆我自己写一个好了。
2024-06-16 19:46:16
2420
原创 抽丝剥茧：详述一次DevServer Proxy配置无效问题的细致排查过程
事情的起因是这样的，在一个已上线的项目中，其中一个包含登录和获取菜单的接口因响应时间较长，后端让我尝试未经服务转发的另一域名下的新接口，旧接口允许跨域请求，但新接口不允许本地访问（只允许发布测试/生产的域名访问）。
2024-05-12 21:27:07
3097
2
原创 构建动态交互式H5导航栏：滑动高亮、吸顶和锚点导航技巧详解
使用粘性定位 sticky 实现吸顶，IntersectionObserver 观察元素相交状态实现滑动高亮，计算高度并通过 scroll 实现吸顶。
2024-04-14 20:34:11
2187
2
原创 antd/fusion表格增加圈选复制功能
我们存在着大量在PC页面通过表格看数据业务场景，表格又分为两种，一种是 antd / fusion 这种基于 dom 元素的表格，另一种是通过 canvas 绘制的类似 excel 的表格。基于 dom 的表格功能丰富较为美观，能实现多表头、合并单元格和各种自定义渲染（如表格中渲染图形 / 按钮 / 进度条 / 单选框 / 输入框），以展示为主，不提供圈选、整列复制等功能。canvas 绘制的类 excel 外表朴素更为实用，大量数据渲染不卡顿，操作类似 excel，能行/列选中，圈选、复制等功能。
2023-09-24 19:00:05
519
原创 PC首页资源加载速度由8s降到2s的优化实践
我们这次主要选择的指标是 FCP、LCP。FCP 表示着用户能最快看到页面内容的时间，LCP 则是可视区域的最大内容，这两个指标代表着用户真实对于页面快和慢的体验，FCP 在 1.8 秒内，LCP 在2.5 秒内是比较好的。
2023-09-10 20:55:55
422
原创 为react项目添加开发/提交规范（前端工程化、eslint、prettier、husky、commitlint、stylelint）
因历史遗留原因，接手的项目没有代码提醒/格式化，包括 eslint、pretttier，也没有 commit 提交校验，如 husky、commitlint、stylelint，与其期待自己或者同事的代码写得完美无缺，不如通过一些工具来进行规范和约束。
2023-08-06 20:17:56
1047
原创 GIT保存记录原理之commit对象
每一次 commit 提交都是一个 commit 对象，通过40位的哈希校验和，可以找到 tree 对象，它也是一个校验和，通过这个校验和可以找到这次提交依赖的所有文件（二进制）并还原成真实文件。
2023-06-24 20:52:30
1862
原创 关于预处理器 sass 的超全用法
和 js 中的函数类似，在 sass 中将比较复杂或者常用的内容进行封装，可以重复使用。函数的定义函数名 function-name 与 function_name 相同@return 它只允许在函数体中使用，并且每个@function必须以@return结束。当遇到@return时， 它会立即结束函数并返回其结果。函数入参可以设置默认值，也可以按参数名传值，或者通过...表示任意参数函数@function实现的某些功能混入@mixin也能实现，但函数更侧重于做一些计算。
2023-05-14 21:28:12
720
原创 预处理器 Less 的十个语法
Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。不过浏览器只能识别 CSS 语言，所以 Less 语言直接运行在浏览器端是不被识别的，需要我们通过一些方式将其先转成 CSS，再将 CSS 资源加载到浏览器中。
2023-04-02 20:58:23
434
原创 去中心化组件共享方案 —— Webpack Module Federation（模块联邦）
如果多个应用之间希望资源共享，除了使用 npm 包的形式，基于Webpack 5 Module Federation（模块联邦）实现的EMP微前端方案也可以一试，它不限制技术栈，但依赖于 Webpack5。
2023-03-26 20:16:52
637
原创 从ABNF读懂HTTP协议格式
HTTP是互联网中应用最广泛的应用层协议之一，设计之初是提供一种发布和接收HTML页面的方法，由URI来标识具体的资源。
2022-11-27 19:48:53
547
原创 网络互连模型之物理层和数据链路层
OSI 参考模型 是 ISO 公司提出的理论知识，并不具备实际应用。在真实使用中真正得到认可的是 TCP/IP 协议，学习的时候会把【网络接口层】还原成【数据链路层】和【物理层】，因为这两层关乎通信原理，非常重要。
2022-10-09 22:43:05
1179
原创 计算机的六种连接方式
交叉线适合两台计算机直连同轴电缆半双工通信、不安全、中间断了整个瘫痪集线器一个断了不会影响其它，仍然是半双工通信且不安全网桥具有记忆功能，可以记忆计算机的IP地址交换机相当于具有集线器+多接口的网桥，但仍然不能够跨网段路由器有记忆功能、可以跨网段以上就是计算机的六种连接方式， 更多有关前端、网络协议的内容可以参考我其它的博文，持续更新中~...
2022-08-28 22:27:27
5010
2
原创 vite — 超快且方便的编译工具
vite 基于 esmodule 来处理数据，使用到工具 ESBuild，编译速度非常快css、less、typescript、react 在 vite 中可以直接使用默认配置文件 vite.config.js 可添加其它配置，如 pluginvite 提供了编译后预览的指令 npx vite preview以上就是vite 编译资源的介绍， 更多有关前端、工程化的内容可以参考我其它的博文，持续更新中~...
2022-08-14 20:02:42
2498
原创 Rollup 编译资源离不开 plugin
rollup主要用于处理esmodule的 js 资源，通过命令行可以直接执行，需要指定入口出口文件，以及编译的方式。默认不被支持的资源处理需要通过plugin，自己通过 commonjs 导出的资源使用，第三方库解析通过，处理 css 需要，vue 得依赖和，转换和压缩离不开和，最后通过和开启服务。区分环境通过配置参数。以上就是Rollup 编译资源的介绍， 更多有关前端、工程化的内容可以参考我其它的博文，持续更新中~...
2022-08-07 19:09:19
662
原创 gulp来处理html、css、js资源啦
html文件通过插件对代码压缩less文件使用插件gulp-less解析，css文件兼容性通过处理js文件使用gulp-babel进行代码转换，压缩代码配合魔法注释将资源添加到html页面中和watch为编译开启自动服务串行和并行组合任务以上就是gulp处理html、css、js资源的介绍，更多有关前端、工程化的内容可以参考我其它的博文，持续更新中~httpshttpshttpshttpshttpshttps。...
2022-07-31 21:42:06
454
原创 gulp使用指南
gulp主要以“流”的方式来处理资源，没有模块化，不适合大型项目。gulp每次处理即开启异步任务，可以并行、串行、监听资源的更新。使用插件，gulp也能实现代码转化、压缩等功能。以上就是gulp的介绍，更多有关前端、工程化的内容可以参考我其它的博文，持续更新中~httpshttpshttpshttpshttpshttpshttpshttps。...
2022-07-24 21:37:55
445
原创 一起来自定义loader吧
新建node项目，在src文件夹下的index.js中简单编写一些代码name'alice',age20,};创建loaders文件夹，在文件夹下增加用于处理loader的js文件，通过module.exports函数可以拿到需处理的文件内容，并将处理好的结果返回};在配置文件中引入自定义的loader。定义loader方式有两种通过相对路径引入（这里使用的方式）通过resolveLoader属性配置，默认会去node_modules中查询依赖。.........
2022-07-17 19:54:59
698
3
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人