qq_58062502的博客

rrweb 是 'record and replay the web' 的简写，旨在利用现代浏览器所提供的强大 API 录制并回放任意 web 界面中的用户操作。

在前端开发中，监控和错误追踪是确保应用稳定性和用户体验的重要环节。随着前端应用的复杂性增加，JavaScript错误监控变得尤为重要。在生产环境中，为了优化加载速度和性能，前端代码通常会被压缩和混淆。这虽然提升了性能，但也给错误追踪带来了挑战，因为错误报告中显示的代码位置和实际代码不一致，使得开发者难以定位和修复问题。Sourcemap技术应运而生，它是一种将压缩后的代码映射回原始源代码的工具。通过sourcemap，开发者可以准确地从错误报告中找到原始代码中的问题所在，即使这些代码已经被压缩或混淆。

最近一年，为了满足公司业务开发，解决重复搭建项目繁琐过程，自己开发了一个前端脚手架，并发布到npm。随着时间的推移，发现之前的版本存在很多问题，有些功能做不到位，而且代码也不是很规范，流程逻辑混乱等等。因此，为解决这些问题，我决定对其进行重构，添加检查更新版本功能，优化打包，将多个文件打包成单个cjs文件，支持更多的自定义以及快速克隆运行。如果之前对这个项目没有了解的同学，可以去看上一篇关于脚手架开发的文章。

之前工作中遇到一个电子签名的需求，在后台管理系统产品验证模块需要绘制或上传产品检验报告单，报告单上实现电子签名功能。电子签名功能可以切换画笔颜色、画笔粗细、回退、重做、擦除和一键清空，支持以图片格式下载签名到本地存储，要求签名图片不能模糊，字体书写线条平滑，没有严重的锯齿感等。以上需求大致意思如下：功能：自由绘制线条、选择画笔颜色、撤销、重做、擦除、画笔粗细、下载、重置要求：线条平滑度、高清晰度。

最近遇到一个如何暴露React组件自身方法的问题。在某些时候，我们需要调用某个组件内部的方法以实现某个功能，因此我们需要了解如何暴露组件内部API的方法。

什么前端脚手架？前端脚手架是一种工具，用于快速搭建前端项目的基础结构，提供了一套约定和标准，帮助开发人员快速启动项目开发。常见的前端脚手架包括Create React App、Vue CLI、Angular CLI、@nestjs/cli等。我为什么要写一个自己的前端脚手架？过去一年里，因为前端业务的需要，自己编写了一个前端脚手架，并在前端业务中应用，快速搭建项目，遵循最佳实践，提高开发效率。自定义脚手架可以减少重复性的工作，不再需要复制其他项目再删除无关代码，或者从零创建一个项目和文件。

在Windows PowerShell等终端输入（npm、cnpm、nodemon）运行项目命令时，被提示无法加载文件，系统禁止运行脚本。具体错误描述如下图：这个错误通常是由于Windows系统安全策略导致的，系统会默认阻止运行某些脚本文件。系统阻止某些脚本运行，时为了保护系统不被恶意脚本入侵。

水印很难不被篡改，因此我们必须给水印修改做一定的篡改防范，让用户不那么容易修改。然后使用watchEffect()重新制作水印。当用户删除水印元素或修改水印样式时，通过判断MutationObserver捕获到元素的变化，确定是否执行flag.value++，从而触发watchEffect()重新执行绘制水印操作，也就达到了防止水印被篡改的效果。使用该组件必须专递水印文本，水印字体默认30，各水印间隙默认为20。用户可能会右键检查元素并删除水印，所以我们需要监控用户删除或修改水印元素时，重新生成水印元素。

在学习webpack优化打包时，发生的打包错误。使用uglifyjs-webpack-plugin或terser-webpack-plugin插件优化打包，都会报这样的错误。直接执行打包Webpack命令，是没有问题，就是配置vue.config.js之后，不行了。当然，也找到一些回答，说是webpack版本与插件版本不对应产生的。找了半天暂时还没有解决，大家有什么好的解决方案吗？vue.config.js配置。

在vue项目中，我们并不能像*.css一样，直接在项目入口main.js导入Sass/Less样式。那么，我们应该如何导入Sass/Less的全局样式呢。

需求：让el-select下拉选择箭头的位置与选项中的文字竖直对齐。

JSON.stringify()和JSON.parse()是一对处理JSON数据的方法，前者是将JSON对象序列化为字符串，而后者是将JSON字符串解析为JSON对象。

数组扁平化 是指将数组中不规则的多维数组去除维度，使其变成为一维数组。

主要借助FileReader读取文件、canvas的toDataURL(压缩后图片的格式, 要压缩图片的质量0~1)方法实现图片质量压缩。

npm install -g/--save-dev/--save安装包位置