前言 今天偶然遇到这个picture标签，平时在日常的业务开发过程中，比较少使用到该节点，查阅了MDN官方的文档， 🐈 才知道存在着另外一种图片媒体资源标签：通过<picture>标签来包含一个或者多个<source>元素和一个<img>元素，来为不同的显示设备/场景提供对应的图像版本！也就是说，可单纯直接通过html标签以及它的属性...

前言 在开始进行vue的源码阅读之前，可以先download下来关于vue的相关源代码，:thinking_face: 如果我能够在实际的项目中通过vue的断点调试，来跟踪程序的运行执行过程，那么会是一个很好的方式来理解vue的设计与执行过程！本文章将介绍两种不同的调试技巧，可以在实际的过程中各取所需！ 官方源码调试通过执行 👇 的命令 1npm run dev 将启...

前言 在日常的coding编码过程中，难免会遇到其他的同事的编码并没有严格按照入职时的编码规范来严格编码，导致项目中的代码混乱无序，没有按照一定的规则规范，使得最终的整个项目不是完整的一个项目，因此，很有必要将所有的童鞋的编码习惯以及编码风格给统一起来，但又不想直接通过阅读代码的方式以及强制要求的方式要限定统一的规格！eslint + stylelint + pretti...

前言 在实际的vue正常项目迭代过程中，随着日常业务的正常迭代，存在 🈶 那么些场景需要快速访问的页面，减少白屏时间，提升用户体验，比如像一些中间状态页面、跳转页面、动态化因此政策相关文件等等！需要在vue项目的基础上，提供这样子的一个配置，假如直接就 🆕 一个组件作为路由来使用的话，将会加载到不必要的其他js，因此需要将项目进行多页应用转换，说白了就是生成多个htm...

前言 在日常的代码管理中，没有严格按照代码规范来编写代码，提交的git message不规范，很难从提交日志中看出调整了什么内容，其他同事使用的ide与我的不一致，其他同事与我的编码有空格冲突，又不能一口气直接替换，花费大量的时间来进行代码的合并，解决空格冲突等等，我们的编码工作，不应该是在这个重复的低效的工作上的！！👉 因此，**husky(哈士奇)**就闪亮 🌠 ...

前言官方文档 自己的博客运行了也有一段时间了，想了解一下自己的博客站点整体是如何工作的？以及自己可以做点什么，来往这个博客站点中植入自己的插件来满足自定义的需求！本文将具体分析一下hexo是如何工作的？它都有哪些组成？我们可以在这个框架上如何自定义自己的需求？以及这个框架给我们代码的可学习的地方！！！ hexo的组成 首先，不管怎么，代码到手，天下我有！ 👉 先来看...

前言 😖 近期在调试这个react-native相关项目的时候，由于系统进行了升级，意味着所有的环境都的重来，而且像react-native这框架，对环境特别的敏感，花了接近3天的时间，来折腾这个环境的重建，编写此文档，以便于后续其他人避免重复踩这样的雷 brew的坑 首先，在macOS上的这个brew的源的管理，就算是拥有梯子来上网，估计也是心理一直在念F开头的单词...

前言 像JS般来思考less，即可 🈶 一定的深刻认识！！！ 👇 是对应的官方文档 less官方文档 🌠 从官方的文档学习整理了 👇less组成 👽 这里仅针对常见的几个模块(场景)进行详细地介绍！！ 变量 js中采用的let/const/var等关键词来定义一个变量而在less中，则采用@关键词来定义一个变量！ 1234567@color: blue;.a...

前言 近期在折腾这个chatGPT的时候，发现在进行字符串的拼接过程中，如果出现了代码的话， 😕 一旦在代码中出现换行符的时候，marked库就自动将其识别为一个code-block，导致我们在解析这个字符串内容的时候，一下子出现普通文字，一下子出现代码块，硬生生给自己找了坑！在经过两天的奋战后，问了一下chatGPT，然后它居然堂而皇之地承认了！ 在经过一大段时间的...

前言官方文档 既然已经有ESLint以及stylelint了，为啥还要有这个prettier呢？👽 我们都知道，项目团队在研发过程中，必须严格遵循统一的一个代码规范，即便是拥有了ESLint与stylelint的加持，在实际的编码过程中，也还是难免需要借助于插件、三方库来协助规范整个团队的项目开发，因此，我们需要在项目中通过统一提供的编码规则配置方案，由项目自身的开发...

前言Stylelint官方文档 与之前学习的 ESLint 相类似，Stylelint作为一个css linter，可帮助我们避免编写错误的css样式代码，并强制执行预先协商好的“约定”配置，配置可从标准的配置继承而来，也可重写！ Stylelint的相关特性 提供的现成的业界css语法和功能的自定义规则； 支持插件的方式，可创建自定义规则； 提供自我修复的能力，自...

前言ESLint官方文档 根据配置方案，来发现并报告 js中的问题以及提供建议的工具，目的是使代码风格更加一致，同时避免不必要的错误！👉 由于要发现代码中的错误，因此ESLint必不可少地需要解析代码文件(采用Espree，从Acorn基础上演变而来)，对解析生成的AST树进行方案评估。另外，在配置文件中的每一个规则都是一个个的插件！！ 😕 这里提及到配置方案，也...

前言 在刚开始接触这个express框架的时候，利用其脚手架命令，来创建项目的过程中，发现其中 🈶 一种渲染引擎: handlebars，这种引擎在之前的学习文档中 handlebars的学习与使用用 已经有具体提及到，本章节主要想将自己在使用express + hbs搭建这个SSR渲染页面的过程给记录下来，方便后续自己 🈶 来及时查阅！ 一、express项目初始...

前言最近，任何行业都被chatGPT影响：一款好用到超出认知的聊天机器人，其强大的学习和处理收集能力，能够完美地编撰文案、编程的辅助(从咱这两次周末的分享会议总结得知)、语种翻译，还能进行绘制插画，提供法律知识工作等等！基本上是你要什么，他就给什么，而且还能够超出自己想象地来提供，可以说是目前人工智能界最靓的仔！ 😕 那么，我们是不是需要担忧一个问题：我们怕不是要失业了...

前言官方文档 关于HtmlWebpackPlugin插件的时间，相信不少童鞋应该都是比较熟悉的了，在一些现成的脚手架(像vue-cli、react-cli等开源三方脚手架)中，都被集成进去成为其核心成员脚手架模块，负责将结果目标内容文件给输出出来， 0⃣ 配置的方式来快速开发这个业务项目， 😕 但是，在实际的项目开发过程中，避无可避地需要针对现有的采用脚手架搭建起来的...

前言webpack官方loader介绍 关于webpack中的Loader，平时项目中可能比较少用到，一般的脚手架程序都自动集成相关的loader，但是如果我们能够将不同的loader给搭配起来，形成项目自身特色的loader集合体的话，在开发/编码过程中可以提升不少的效率，而且也让程序可以 🈶 更健壮的稳定性！😕 那么什么是Loader？如何使用Loader？Lo...

前言 本文主要着重介绍关于webpack中的模块是如何管理的，其实在网络上已经也有不少的文章关于ES6、CommonJS、AMD的相关介绍了，本文主要侧重于这个模块管理的使用方式！三者都是对模块进行依赖管理的目的，实现同步/异步加载的目标！ ESM ESM主要包含 🈶 2⃣ 个关键词：import和export！ export export 语句用于从模块中导出实...

前言DefinePlugin官网链接 允许在编译时将你代码中的变量替换为其他值或表达式，它并不是变量赋值，而是在编译期间进行字符串的精准匹配与替换！可以理解为，我们在webpack打包的项目中，通过在配置文件(webpack.config.js)中使用插件DefinePlugin，并传递给该插件对应的变量/表达式，都可以在项目中的*.js文件中访问到这些变量/表达式的定...

我是谁 webpack中与assets资源进行交互的模块，逐渐通过对NormalModuleFacotry.hooks.createParser、NoemalModuleFactory.createGenerator、Compilation.hooks.renderManifest等几个钩子容器函数的监听！ 干预的钩子函数 通过提供的干预的钩子函数，创建对应的Parse...

前言 作为webpack中的代码生成器插件，主要负责将对应的chunk生成对应的结果字符串内容！在开始具体解析之前，首先，现看一下 👇 2⃣ 个最简单的结果生成情况对比！ 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354...