皮皮网

1.【Vite 源码学习】3. package.json分析
2.源码细读-深入了解terser-webpack-plugin的源码实现
3.element-plus源码学习日志-03
4.使用Jest测试代码覆盖率

【Vite 源码学习】3. package.json分析

       本文着重解析了Vite项目中dependencies和devDependencies依赖包的用途，以理解Vite如何利用第三方库进行开发。分析Vite的源码dependencies部分主要用于项目运行时，包含了JavaScript解析器如@babel/parser，分析支持CommonJS语法的源码@rollup/plugin-commonjs，以及用于处理TypeScript类型定义的分析法宣刷积分源码@types/*等。例如，源码@vue/compiler-dom和@vue/compiler-sfc是分析Vue模板和SFC底层工具集，brotli-size则用于字符串和Buffer的源码压缩。devDependencies则主要为开发环境提供支持，分析如@babel/runtime为Babel运行时工具，源码jest用于测试，分析prettier则负责代码格式化。源码

       dependencies：关键库如@vue/compiler-dom负责Vue模板编译，分析1ndy源码@rollup/plugin-node-resolve用于模块定位，源码@types/*提供TypeScript类型支持。

       devDependencies：如jest用于编写和运行测试，postcss和less是CSS处理工具，typescript支持项目使用TypeScript，vue-router和vuex则提供路由和状态管理功能。

       这些依赖包的合理配置，使得Vite能够在高效开发的同时，确保项目的稳定性和可维护性。后续内容将继续探讨Vite的其他组件和配置。

源码细读-深入了解terser-webpack-plugin的实现

       terser-webpack-plugin 是一个基于 webpack 的插件，它利用 terser 库对 JavaScript 代码进行压缩和混淆。其核心功能在于通过在 webpack 的广州手绘地图源码运行时钩子 optimizeChunkAssets 中注册，实现了代码优化过程。在 apply 函数中，它获取 compilation 实例，并通过 tapPromise 注册一个异步任务，当 webpack 执行优化阶段时，每个 chunk 会触发这个任务，执行 minify 函数进行压缩处理。

       optimise 函数是实际的任务处理入口，它负责具体的优化流程。函数内部，scheduleTask 负责并行处理，如果开启 parallel 模式，会利用jest-worker提供的scrcpy源码转windows线程池进行并发工作，线程池管理复杂，根据 node 版本不同采用 worker_threads 或 child_process。minify 函数则是压缩和混淆代码的核心操作，它直接使用 terser 库完成任务。

       总的来说，terser-webpack-plugin 的优化流程包括在 webpack 的优化阶段对代码进行压缩，使用 Jest 的 worker 线程池进行并行处理，以及通过 terser 库的实际压缩操作。理解这些核心环节，可以帮助开发者更深入地掌握该插件的使用和工作原理。

element-plus源码学习日志-

       在element-plus的源码探索系列中，今天的重点转向了Dialog组件和Vue3的新特性。首先，物流模板网站源码我们来到element-plus\packages\dialog\src\index.vue，研究内置的teleport组件。

       teleport是个强大的工具，它能让原本作为子组件的DOM元素，通过to属性的指定，直接定位到应用的同级节点，甚至body下。这对于解决层级问题，特别是实现全局弹层时，非常重要。在Vue2时代，我们曾用Vue.extend来创建并挂载在顶层的自定义组件，teleport简化了这一过程。

       接着，我们注意到vue3的自定义指令有所更新，涉及生命周期的变动。虽然具体细节还未详尽理解，但官方文档的说明有待后续深入研究。由于vue3支持fragments，组件不再受限于单一节点，这带来了新的挑战，目前暂存疑问。

       在代码部分，我们回顾了之前讲解过的内容，通过实际例子，复习了相关知识。今天的收获包括对teleport的深入理解，以及对新版本自定义指令的初步接触。

       最后，计划在下篇中，我们将学习如何基于Jest为组件编写单元测试，包括基本用法和测试报告的生成，这是框架开发中的关键步骤。

使用Jest测试代码覆盖率

       在软件开发中，代码覆盖率是衡量测试用例对源代码覆盖程度的关键指标，包括语句覆盖、分支覆盖等多种类型。理想的覆盖率并非越高越好，需要根据项目实际需求如成本、进度和质量标准进行权衡。本文将通过一个示例，教你如何使用Jest进行单元测试，理解覆盖率报告，以及如何提高覆盖率。

       首先，确保Jest环境中安装了所需的包，并避免使用与测试报告重名的目录名。例如，为项目创建一个测试环境，编写并测试index模块：

       运行测试后，所有测试应顺利通过。

       测试代码覆盖率时，可以通过执行特定命令查看结果，报告中会显示Stmts、Branch、Funcs和Lines四个覆盖率百分比。在项目的根目录下，你会看到一个名为coverage的文件夹，其中包含详细报告。在浏览器中打开index.html，可以查看更直观的覆盖率数据。

       为了提升覆盖率，如发现Funcs为%未覆盖，例如second()函数，可以将其导出并在单元测试中添加相应的测试用例：

       再次运行覆盖率测试，以优化代码覆盖率。

       这篇文章源于7月Day5的学习笔记，来自极客时间的《前端进阶特训营》，强烈推荐该课程，帮助你深入理解并实践Jest测试与代码覆盖率提升。