01 2025 档案

摘要:我们已经将我们的代码开源到了 github 上面,但是如果是其他开发者想要使用我们的库,还需要去 github 上面手动下载下来,添加到他们的项目里面,这样是非常低效的一种方式。 npm 的出现解决了这个问题,npm 是前端领域非常出名的一个包的托管平台,提供了代码的托管和检索以及下载安装功能。 注 阅读全文
posted @ 2025-01-31 22:36 Zhentiw 阅读(3) 评论(0) 推荐(0) 编辑
摘要:本小节我们先来介绍一下在设计开源库的时候有哪些原则以及最佳实践。 函数的设计 函数包含三要素: 函数名 参数 返回值 函数名 函数通常表示做一件事情,因此函数名一般为一个动词或者表示动作的短语,我们希望通过函数名就能够传达这个函数是做什么的。哪怕整个函数单词用得多一些,整个函数名长一些也无所谓,只要 阅读全文
posted @ 2025-01-30 11:26 Zhentiw 阅读(1) 评论(0) 推荐(0) 编辑
摘要:在通过 vuecli 创建 vue 项目的时候,我们可以很轻松的将 jest 测试框架集成进去。 之前我们在介绍测试 React 组件的时候,介绍了 testing library 这个扩展库,这个 testing library 是一个通用库,因此这个扩展库可以用于 vue、angular... 阅读全文
posted @ 2025-01-29 18:24 Zhentiw 阅读(9) 评论(0) 推荐(0) 编辑
摘要:在对组件进行测试的时候,往往需要从两个方面进行测试: 交互:确保组件在进行交互时功能正常 渲染:确保组件渲染输出正确(比如不会多一个或者少一个 DOM 元素) 针对渲染方面的测试,我们就可以使用快照来进行测试。 所谓快照,就是给渲染出来的 DOM 元素拍一张“照片”(将最终渲染出来的 DOM 以字符 阅读全文
posted @ 2025-01-29 17:48 Zhentiw 阅读(6) 评论(0) 推荐(0) 编辑
摘要:在进行 React 开发的时候,还有一个非常重要的功能模块,那就是 Hook,自定义 Hook 作为一块公共逻辑的抽离,也会像组件一样被用到多个地方,因此对 Hook 的测试也是非常有必要的。 Hook 没有办法像普通函数一样直接进行测试,因为在 React 中规中,Hook 必须要在组件里面使用, 阅读全文
posted @ 2025-01-29 17:33 Zhentiw 阅读(9) 评论(0) 推荐(0) 编辑
摘要:在现代前端开发中,组件是一个重要的模块,一个组件拥有完整的功能,能够对我们的代码进行最大程度的复用。 因此在进行单元测试的时候,往往也需要对重要的组件进行测试。 这一节课我们先聚焦在 React 上面,看一下 React 的组件如何进行测试。 Testing library 这是专门用来做测试的一个 阅读全文
posted @ 2025-01-28 12:46 Zhentiw 阅读(25) 评论(0) 推荐(0) 编辑
摘要:这一小节,我们来做一个综合的练习,该练习会整合: typescript webpack jest 准备工作 首先创建项目目录,通过 npm init -y 进行初始化。 整个项目我们打算使用 typescript 进行开发,因此需要安装 typescript npm i typescript -D 阅读全文
posted @ 2025-01-27 20:59 Zhentiw 阅读(2) 评论(0) 推荐(0) 编辑
摘要:我们知道,在 ES6 中所提供的 class 本质上是一个语法糖,背后实际上是一个构造函数,因此在对类进行测试的时候,也可以使用 jest.mock 或者 jest.spyOn 来进行模拟测试。 经常我们会遇到这种情况:在测试一个模块的时候,这个模块依赖了其他的类,那么这个时候为了屏蔽其影响,我们需 阅读全文
posted @ 2025-01-27 20:34 Zhentiw 阅读(4) 评论(0) 推荐(0) 编辑
摘要:这一小节我们的目标是学习 Jest 针对在浏览器环境下面的代码,特别是使用到了浏览器 Api 的代码,如何进行测试。 示例一 示例一:有一个输入框,用户在输入框中输入内容,该内容会被存储到 localstorage 里面。localstorage 就是浏览器环境下面特有的 Api <body> <p 阅读全文
posted @ 2025-01-26 11:23 Zhentiw 阅读(5) 评论(0) 推荐(0) 编辑
摘要:预处理器介绍 预处理器基本介绍 Sass 快速入门 预处理器基本介绍 平时在工作的时候,经常会面临这样的情况:需要书写很多的样式代码,特别是面对比较大的项目的时候,代码量会急剧提升,普通的CSS书写方式不方便维护以及扩展还有复用。 通过 CSS 预处理技术就可以解决上述的问题。基于预处理技术的语言, 阅读全文
posted @ 2025-01-25 19:09 Zhentiw 阅读(5) 评论(0) 推荐(0) 编辑
摘要:整合 TypeScript 准备工作 首先我们需要有一个基于 ts 的项目。 第一步通过 npm init -y 初始化项目 接下来通过: npm install typescript 局部安装 typescript。 之后还需要生成 typescript 的配置文件,通过命令: npx tsc - 阅读全文
posted @ 2025-01-25 18:45 Zhentiw 阅读(10) 评论(0) 推荐(0) 编辑
摘要:模拟函数 在 Jest 中提供了一个全局对象名为 jest,这个对象上面有非常多的方法,有关该对象的方法,可以参阅文档: https://jestjs.io/docs/jest-object jest 对象上面的方法大致分为四类: 模拟模块 模拟函数 模拟计时器 其他方法 通过 jest.fn 方法 阅读全文
posted @ 2025-01-24 16:51 Zhentiw 阅读(7) 评论(0) 推荐(0) 编辑
摘要:自定义插件 要自定义 babel 的插件,实际上有一个固定的格式: module.exports = function(babel){ // 该函数会自动传入 babel 对象 // types 也是一个对象,该对象上面有很多的方法,方便我们对 AST 的节点进行操作 const { types } 阅读全文
posted @ 2025-01-23 16:43 Zhentiw 阅读(4) 评论(0) 推荐(0) 编辑
摘要:前端自动化测试 这一小节主要会介绍: 单元测试对于我们前端的重要性 软件开发模型与自动化测试 前端测试框架 单元测试 不同的测试这里会形成一个测试金字塔: 一般来讲,软件开发中单元测试是做的最多的。 从测试金字塔的角度来看,越往上测试的成本是逐渐增加的,因为越到后期才抛出的 Bug,程序员要修复这个 阅读全文
posted @ 2025-01-22 20:40 Zhentiw 阅读(15) 评论(0) 推荐(0) 编辑
摘要:测试基本认知 这节课我们会从以下几个点来介绍和测试相关的基本知识: 为什么需要测试 ? 有哪些测试 ? TDD和BDD项目驱动模式 为什么需要测试 测试保证了软件的质量和可靠性,确保我们的软件是按照预期的功能进行的。 发现和修复权限 通过测试,我们可以提前发现一些功能不完整、性能低下、有安全漏洞的地 阅读全文
posted @ 2025-01-22 20:39 Zhentiw 阅读(9) 评论(0) 推荐(0) 编辑
摘要:自定义插件part1 关于 babel 中如何创建自定义插件,官方是有一个 handbook:https://github.com/jamiebuilds/babel-handbook/blob/master/translations/en/plugin-handbook.md AST Babel处 阅读全文
posted @ 2025-01-22 20:34 Zhentiw 阅读(8) 评论(0) 推荐(0) 编辑
摘要:集成Prettier 目前我们所学习的两个工具:Pretter 和 ESLint,两者都有管理代码风格的功能,因此两者往往就会在代码风格的管理上面存在一些冲突。 例如举一个例子: ESLint 配置了单引号规则 Prettier 配置了要使用双引号 那么现在假设你使用双引号,ESLint 会提示错误 阅读全文
posted @ 2025-01-21 13:41 Zhentiw 阅读(18) 评论(0) 推荐(0) 编辑
摘要:自定义ESLint插件 ESLint插件主要是用来扩展ESLint本身没有的功能,这里包括扩展规则、扩展配置、扩展解析器。 90%的ESLint插件都是以扩展规则为主,所以这些插件里面会包含大量的自定义规则。 像这一类的插件,一般一条规则会对应一个 JS 文件,JS 文件里面需要导出一个对象: mo 阅读全文
posted @ 2025-01-21 13:14 Zhentiw 阅读(23) 评论(0) 推荐(0) 编辑
摘要:SWC SWC 英文全称为 Speedy Web Compiler,翻译成中文为“快速网页编译器”。 官网地址:https://swc.rs/ 来看一下官方的介绍: SWC is an extensible Rust-based platform for the next generation of 阅读全文
posted @ 2025-01-20 10:13 Zhentiw 阅读(12) 评论(0) 推荐(0) 编辑
摘要:Terser Terser 是一个流行的 JavaScript 解析器和压缩器,它可以帮助你优化 JavaScript 代码以减少其大小,从而提高 web 页面的加载速度。Terser 是 Uglify-es 的替代品,后者已经停止维护,Terser 支持 ES6 和更高版本的 JavaScript 阅读全文
posted @ 2025-01-20 10:00 Zhentiw 阅读(12) 评论(0) 推荐(0) 编辑
摘要:配置文件 配置文件格式 配置文件选项 配置文件的格式 在 babel 中,配置文件本身又可以分为两种: 项目范围的配置文件 文件相关配置文件 项目范围配置文件 顾名思义,就是该配置文件针对整个项目生效的一个配置,这种类型的配置文件一般放在项目根目录下面,babel 对项目范围级别的配置文件是有格式要 阅读全文
posted @ 2025-01-16 21:01 Zhentiw 阅读(8) 评论(0) 推荐(0) 编辑
摘要:APIs 关于 babel 里面的 APIs 主要位于 @babel/core 这个依赖里面,你可以在官网左下角的 Tooling Packages 分类下找到这个依赖包。 这里顺便介绍一下每一种依赖包的作用: @babel/parser: 是 Babel 的解析器,用于将源代码转换为 AST。 @ 阅读全文
posted @ 2025-01-16 20:58 Zhentiw 阅读(10) 评论(0) 推荐(0) 编辑
摘要:使用插件 在 babel 要使用一个插件,步骤实际上非常简单,就分为两步: 安装插件 在配置文件或者 CLI 中指定插件 举个例子,例如有一个专门将箭头函数转为普通函数的插件: pnpm add @babel/plugin-transform-arrow-functions -D 之后在配置文件中进 阅读全文
posted @ 2025-01-16 20:53 Zhentiw 阅读(16) 评论(0) 推荐(0) 编辑
摘要:CLI 关于 babel 所提供的 CLI,你可以在 https://babeljs.io/docs/babel-cli 看到所有所支持的 CLI 命令。 要使用 CLI 命令,首先第一步是安装: pnpm add --save-dev @babel/core @babel/cli 注意在安装 @b 阅读全文
posted @ 2025-01-16 20:48 Zhentiw 阅读(3) 评论(0) 推荐(0) 编辑
摘要:Babel介绍 Babel 是一个编译器,主要用于将最新的 JavaScript 代码转化为向后兼容的代码,以便在老版本的浏览器或环境中运行。 例如,你可能在开发时使用了 ES6、ES7 或者更高级的 JavaScript 特性,但是有些浏览器可能并不支持这些新特性,这时就可以用 Babel 来将代 阅读全文
posted @ 2025-01-16 20:40 Zhentiw 阅读(5) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示