zhyafe

css 的 flex 弹性布局,广泛应用在当今的页面开发中,其弹性伸缩的的灵活性非常擅长于开发有响应式需求的网站。但是有很多时候,其灵活性也会让人疑惑,特别是确定尺寸时,基本上是靠不断尝试。为了在开发时更加得心应手,下面将以主轴方向上,也就是默认布局方向上的成员宽度值计算为例子…

这是一篇干货比较多的组件库搭建实战教程，不仅有通用的代码规范、提交规范、文档维护、单元测试、GitHub Action 配置的讲解，还涉及基于 lerna 的多包管理架构...

这一章讲打包体积优化，这个也算是最重要的一章了，我之前可是花了很多时间去查资料怎么优化打包体积的，不同版本的webpack之间还有一些区别，所以也算踩了很多的坑，所以这一章会比较长。 可以清晰的看到antd和react-dom就占了一半多，下面来优化。 1. 修改mode 2.…

在上两章节中我们已经介绍过了 JavaScript 打包机制 以及 webpack 所有的内置配置，但当项目业务功能达到一定规模时，默认的配置已经不足以满足开发、用户的期望，我们就需要对 webpack 配置进行优化。 如何知道具体该如何优化喃，最直观的方式是分析它的输出文件，…

响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。传统的开发方式是PC端开发一套，手机端再开发一套，而使用响应式布局只要开发一套就够，缺点就是CSS比较重。下面是博客网站对不同设备适配后的结果，分别是iPhone5/SE,iphone6/7/8,iphone 6/7/8 p…

在前面的部分，我们使用 React 等相关技术构建了库并对其进行了测试。现在，我们准备对前面的代码进行打包，并将其发布至 NPM，方便其他人使用。 组件库开发到了这里，终于也到了最重要的部分，解决（文档 + 打包）的问题。 在尝试了一些打包库（比如create-react-li…

在2020的今天，构建一个 web 应用对于我们来说，并非什么难事。因为有很多足够多优秀的的前端框架（比如 React，Vue 和 Angular）；以及一些易用且强大的UI库（比如 Ant Design）为我们保驾护航，极大地缩短了应用构建的周期。 但是，互联网时代也急剧地改…

最近在研究代码 Lint 相关的内容，业界比较常用的方案是Husky配合lint-staged在代码提交前进行Lint，防止将不规范的代码提交到远端。 对Husky的工作原理很感兴趣，花了点时间研究，借此文做一下总结，希望对正在学习这块内容的朋友有一些帮助。 到此，git co…

单元测试一直以来都是让开发者又爱又恨的东西，相信在0202年，技术团队都意识到了单元测试的重要性，但是苦于开发时间的制约，和对于陌生领域的抵触心理，迟迟没有没付诸于行动。单元测试在开发初期确实会增加我们的整个开发周期，但是项目不断的成长，没有单元测试代码的维护风险也是不断递增的…