Karma-Jasmin-Webpack 单元测试

Photo by Gabor Koszegi on Unsplash

为了确保 fast-recorder 能够在实际浏览器环境下如预期的执行,在单元测试阶段,就要在浏览器环境下进行测试。Karma 测试框架帮我很好地解决了这个问题。

Karma 本身可以提供浏览器环境,并在其中利用单元测试框架(jasmin)等来做单元测试。同时强大的是,它有一个 preprocessor(预处理器)模块,可以在浏览器加载脚本时,根据你的需要对程序进行预处理。

继续阅读Karma-Jasmin-Webpack 单元测试

使用 Babel Webpack 打造库

Photo by Lê Tân on Unsplash

本人工作后一直采用自顶向下的方法自学编程知识。初期的学习曲线就是直接上手框架加第三方类库,加之这些工具都比较成熟,自带转译(Babel)和打包工具(Webpack),故这两类工具的使用较少。今天在编写自己的类库后发现,使用这两种工具还是有很多问题,故记录分享如下。

工具链逻辑

转译(transpile)。Babel 转译工具的作用是将可在最新的 JavaScript 语法转化为可被旧浏览器运行的兼容代码。转译工具不会处理模块之间的依赖关系。Babel 默认会把 import export 等转译为 require 和 module.exports。

打包。在撰写本文的 2020 年,浏览器对 JavaScript 模块化的支持还是很糟糕,因此需要单独的打包工具来将各个模块聚合在一个文件中。而聚合的线索就是转译工具生成的 require 或者 import 语法。

继续阅读使用 Babel Webpack 打造库

前端工具的逻辑

Photo by Jeffrey Lee on Unsplash

前端程序开发中会接触到多种多样的工具,让人眼花缭乱。有人甚至做了网站来罗列常用的前端工具。这两天本人梳理了一下常用的前端工具,按功能不同,将它们分为代码转译、代码构建工具、代码风格统一、代码提示与单元测试工具五大类。

继续阅读前端工具的逻辑