元气少女冰

摘要： 在上一篇文章中，我们探讨了如何构建一个通用的脚手架框架。今天，我们将在此基础上进一步扩展脚手架的功能，赋予它下载项目模板的能力。 通常情况下，我们可以将项目模板发布到 npm 上，或者在公司内部利用私有 npm 仓库进行托管。通过交互式命令行界面，开发者可以轻松选择项目类型、项目名称以及所需的项目模 阅读全文

摘要： 在现代软件开发中，创建 定制化的命令行工具(CLI) 已成为满足公司业务需求的关键一环。这类工具可以辅助执行诸如代码检查、项目初始化等任务。为了提高开发效率并简化维护过程，我们将功能模块化，并通过多个子包来组织这些功能。本文将介绍如何使用 Lerna 来管理一个多包项目，并基于 Commander 阅读全文

摘要： 在日常的前端开发工作中，我们经常依赖各种命令行工具来提高效率和代码质量。例如，create-react-app 和 eslint 等工具不仅简化了项目的初始化过程，还能自动执行代码检查和格式化任务。当我们使用这些工具时，它们通常会通过一系列互动式的问答来收集必要的信息，从而根据我们的选择进行相应的配 阅读全文

摘要： 在日常的前端开发中，我们常常借助各种基于 Node.js 的脚手架工具来加速项目搭建和维护，比如 create-react-app 可以一键初始化一个 React 项目，eslint 则帮助我们保持代码的整洁和一致。而在公司内部，为了更好地满足特定业务的需求，我们往往会构建自己的脚手架工具，如自定义 阅读全文

摘要： 我们已经了解了许多关于 Webpack 的知识，但要完全熟练掌握它并非易事。一个很好的学习方法是通过实际项目练习。当我们对 Webpack 的配置有了足够的理解后，就可以尝试重构一些项目。本次我选择了一个纯HTML/JS的PC项目进行重构，项目位于 GitHub 上，非常感谢该项目的贡献者。 重构案 阅读全文

摘要： 目前，前端开发已经离不开由 CommonJS、ES Modules 和 Webpack 构建的模块化开发环境。无论是 JavaScript、CSS、图片还是其他资源，都可以作为一个模块来处理。那么，模块化究竟是如何发展到今天的呢？ 全局函数模式 最初的前端模块化尝试是通过 全局函数来实现的。例如，在 阅读全文

摘要： 在上一篇测试指南中，我们介绍了Jest 的背景、如何初始化项目、常用的匹配器语法以及钩子函数的使用。这一篇篇将继续深入探讨 Jest 的高级特性，包括 Mock 函数、异步请求的处理、Mock 请求的模拟、类的模拟以及定时器的模拟、snapshot 的使用。通过这些技术，我们将能够更高效地编写和维护 阅读全文

摘要： 随着JavaScript在前后端开发中的广泛应用，测试已成为保证代码质量的关键环节。 为什么需要单元测试 在我们的开发过程中，经常需要定义一些算法函数，例如将接口返回的数据转换成UI组件所需的格式。为了校验这些算法函数的健壮性，部分开发同学可能会手动定义几个输入样本进行初步校验，一旦校验通过便不再深 阅读全文

摘要： 公司项目一般都是使用集团封装好的脚手架，脚手架内部实现咱看不到也摸不着，好不容易组内推行新的UI框架，需要自行定义 webpack 配置，这可是个绝佳的好机会，我对配置过程进行了梳理，把商业项目的成熟配置小跑着送上。 初始化 首先新建一个空文件夹，执行 npm init 初始化生成 package. 阅读全文

摘要： 平时我除了业务需求，偶尔会投入到UI组件的开发中，大多数时候只会负责自己业务场景相关或者一小部分公共组件，极少有从创建项目、集成可视化、测试到发布的整个过程的操作，这篇文章就是记录组件开发全流程，UI组件在此仅作为调试用，重点在于集成项目环境。 组件 我们使用 React + TypeScript 阅读全文