打包发布 React 组件库

打包发布 React 组件库

起因

「代码写了不测等于白写」我总是跟身边的朋友这样调侃。然而我们写前端项目时很难在代码层面进行测试,大部分函数都是基于事件响应,接收用户输入的参数,并对页面组件或数据产生一定副作用,Mock 起来很麻烦。所以前端项目的测试往往都是端到端测试,即模拟用户在页面上进行操作,测试路径越离奇越好,因为无法提前预知用户会如何使用,所以最好在测试时可劲儿造。

曾经还会想着用 Cypress 等自动化工具进行端到端测试,例如用代码定义【打开某页面–>拖拽滑动条至页面下方–>点击输入框使之获取焦点–>输入“Hello world”–>按下回车–>等待页面响应–>观察响应是否符合预期】这个过程,但只要遇到元素稍多的页面,编写测试用例的过程就会变得机械呆板。

如果组件足够小,内容够聚焦,那么测一下也不是不可以。因为想在不同的项目中复用同一套富文本编辑组件(体积比较大,且包含机器构建的 JS),我把它单独提出来作为 NPM 包发布以便各个项目安装使用。这当中编码和测试都遇到了一些问题。

阅读更多

从 Vue 到 React —— 第一印象

学习 React 的初衷

之前说过想要学习 React,秉持着边学边记录的想法,我随即开启了这篇帖子。

从 Vue 说起

我是一个 Vue 的忠实粉丝,虽然没有全部读过 Vue 的源码,但是对它的基本实现原理和大体的使用方法还是比较熟悉的。我自己思考过,我觉得我喜欢 Vue 大概率是因为我最早接触的前端开发框架就是 Vue。记得是 2018 年参加一项 SRT 的时候,为了开发一款简单的后台管理系统,我开始学习 javascript 以及 Vue。

当时我还是第一次接触脚本语言,对没错,我接触 javascript 比接触 python 更早一些。熟悉了 C/C++ 的继承机制之后,突然要接受 javascript 的原型链继承一时间有点缓不过来。但是后来还是被磨平了棱角,被迫接受了原型这一设计。为了开发 Web 应用通过一位学长的介绍接触到了 Vue 这个框架。我直接惊为天人,还能这样写?因为根据我更早之前的一些浅显的印象,Web 开发是分别要编写 HTML,javascript 和 CSS 三种文件的。现在用 Vue 一个文件就可以生成一个完好的页面,着实非常酷炫。也是在 Vue 这里,我了解到了组件、生命周期、全局状态管理、前端路由等等一些重要的概念,所以先入为主地对 Vue 有强烈好感也正常吧。

阅读更多