online阳光-专注于大前端行业领域

前言 webpack内部的自执行的插件，主要负责提供infrastructureLogger属性到compiler对象上，并创建对应的文件属性到compiler对象上，然后监听到compiler.hooks.beforeRun钩子容器中，将过程日志怼到标准输入中！用于基础设施水平的日志选项

前言 ProgressPlugin提供了一种自定义编译过程中进度报告方式的方法！ 官方链接 使用方式 一般地，我们可以通过创建一个ProgressPlugin对象并传递允许的可选参数，来实现自定义输出的目的！ 123456789// webpack.config.jsconst {ProgressPlugin} = require("webpack");module.exports = { plugins: [ new ProgressPlugin({ //... 参数说明见下表 }) ]}; ☝ 加入了对应的插件配置后，则有对应的 👇 的日志输出 参数名称 类型 描述 activeModules boolean 显示活动模块计数和一个正在进行的活动模块消息 dependencies boolean 显示依赖的数量 dependenciesCount boolean 显示的最小依赖数 entries boolean 显示入口数量 handler HandlerFunction 在每一步的过程中被调用 modules boo ...

前言 上文中我们所提及到的webpack创建了一个Compiler对象，由它来进行相关的打包任务动作的启动等，而且作为所有的插件所共同访问的到的一个编译器对象，😕 那么，这个Compiler是什么呢？？它做了哪些事情呢？ Compiler的组成 Compiler是什么?执行过程是怎样的？ Compiler 模块是 webpack 的主要引擎，它通过 CLI 或者 Node API 传递的所有选项创建出一个 compilation 实例。 它扩展（extends）自 Tapable 类，用来注册和调用插件。 大多数面向用户的插件会首先在 Compiler 上注册。首先，先来看一下 👇 的一副Compile的run方法的执行过程所触发的钩子函数，以及都有哪些插件在对应的钩子容器中添加了各自的钩子函数动作：☝ 我们可以清楚地了解到run方法的执行过程， 👇 将一一来分析每一个节点过程 1、触发beforeRun方法 在开始执行一次构建之前调用，compiler.run 方法开始执行后立刻进行调用 描述 值 传递参数 Compiler对象 调用方式 AsyncSer ...

前言 现在基本上每一个前端童鞋都与webpack在工作学习上都有所依赖，不管是以前还是未来，webpack都将占据非常重要的地位，而且都会与每一位前端童鞋息息相关，那么我是否可以像之前阅读其他的源码一样，来通过阅读webpack的源码，一步一步跟着代码来读懂这个webpack呢？起初我也是这么做的，然后我放弃了，其中的代码量之多，而且又超级复杂，错综复杂我觉得已经不能够用来形容这个webpack了，😫 不可能完全通过单纯的硬着头皮来阅读代码来理解，因此，我觉得需要整理一套方便自己来理解这个webpack的一整套方案来理解整个webpack框架，本次学习基于V5.75.0版本的！ webpack的组成结构 通过简单的通读webpack的相关源代码，自己整理了关于webpack的几个比较重要模块，如下图所示：关于几个模块，我觉得有点像战场上的战斗一般，指挥官(Compiler)根据上级指令(webpack.config.js配置)安排好一切之后，下达指令给士兵(Compilation)，士兵接收命令进行作战(编译/打包)，在作战的过程中，拥有一系列的装备(Plugin)的加持，使得士兵 ...

前言 在刚接触webpack的时候，仅仅只是懂得了关于如何通过简单的配置，来告知webpack如何进行一个打包工作，但是，对于webpack中具体是如何工作的，却全然不晓得，因此，觉得很有必要来对其中的执行过程进行一个深入的学习，在学习的过程中，又遇到了一个看着一头雾水的代码this.hooks.compiler.XXX系列方法，通过相关的资料查阅才知道，原来webpack中的compiler的相关的勾子函数的实现，都是由这个tabable来实现，因此，编写此文章来记录一下学习的过程，加深对tapable的理解，也可以在自己后续的框架中来使用到这个框架！ tapable是什么? 在经过相关的学习文档以及使用的方式得出的结果，其实tapable它是一个类似于connect中间件的一个框架，但是它又比connect框架又有更多的额外的特殊属性，正是由于这个特殊的属性，采用多次注册一次执行的方式，使得wepback能够实现复杂的多变的”类似生命周期”的相关函数方法: 容器的思维，在hooks对象中所定义的每一个属性都是一个容器，每个容器都可以有无限多的钩子函数； 容器中的钩子函数的执行 ...

前言 基于less的基础上进行的二次改造，项目主要是基于grunt + assemble + handlebars来进行搭建的，借助于handlebars-help所提供的便捷helpers工具类，来快速的对页面进行输出，并通过自定义的相关额外的helpers工具类，来实现文档的自动关联、自动锚点、自动配置的数据、按照既定的模版规范来输出对应的html页面内容 如何搭建一、安装相关的依赖12345678#第一步，执行命令：进行这个assemble模块的安装npm i assemble --save-dev#第二步，执行命令：安装对应版本的gruntnpm i grunt@0.4.3 --save-dev#第三步，执行命令：安装对应的grunt命令，主要是为了方便配合调试用的npm i grunt-cli --save-dev 二、初始化相关的配置以及环境🌠 根据官方的assemble的相关介绍，进行项目的初始化，对应的相关目录以及代码如下： 🌠 初始化Gruntfile.js文件内容： 🌠 创建对应的模版文件以及相关的页面文件 🌠 在调试、编写代码的过程中，难免会遇到或这或 ...

前言 在第一次接触Assemble的时候，觉得自己以前好像不是这么走过来的，自己以前是直接上jquery，或者原生的编码，对于项目的打包也是采用的最原始的方式来打包，没有去借助于一些便捷的打包工具，比如gulp、grunt等，等到后续慢慢接触久了，才有了这个想要“偷懒”的想法，在之前的关于grunt的学习中也了解到，grunt就是将一些经常做的事情，交由grunt框架来做，仅需要简单的传递对应任务以及其方法参数即可完成日常的测试、打包、部署动作！而Assemble则是基于grunt上的一个插件，该插件主要做的是通过既定的规则来限定项目的代码组织结构，在享受grunt打包的便利的同时，也顺便统一了前端静态化打包的规范，通过其额外提供的handlebar-helper方法工具库，来实现快速搭建一静态网站站点的目的！！！ assemble如何使用? 本章将采用’黄金圈’的规则来解读一下Assemble！！ assemble是什么? Assemble就是一个grunt插件，按照之前的插件的学习，插件对外暴露的都是在对应的tasks目录中，对外暴露的一方法，该方法接收的grunt作为参数来使 ...

前言 从express的脚手架中默认初始化的是handlebars模版引擎，那么它是怎样的一个引擎呢？平时在项目过程中是否有使用到它的一个场景呢？👉 我打算搭建多另外一个站点，模仿less的关于文档的快捷在线浏览中文站点，不想仅仅单纯通过翻译别人的网站，而自己根本不清楚其中的一个使用相关原理，因此，我开始这个自建CMS站点之路，而且从国内目前的前端来看，以前的前端一来就直接上手jquery，现在立马就进入vue/react/angular+webpack，但对比国外的开发佬，好像人家一来就是静态站点，然后配合相关的工具比如grunt打包，编写自己的CMS生态，借助于grunt来实现的grunt生态体系，我也在另外一篇文章中详细阐述了grunt是什么以及如何使用的，本文主要分享一下关于handlebars是如何使用的，以及在使用的过程中有一些不清晰的概念以及用法，记录到文档中，方便自己以及他人后续学习！ 官方介绍官方链接 什么是Handlebars?使用模版和输入对象来生成HTML或其他文本格式，该模版看起来像常规的文本，但是它带有嵌入式的Handlebars表达式首先先看看 👇 ...

前言 在完成一两天的通读grunt在线文档之后，原来grunt也并没有那么地复杂，首先他是一个nodejs程序，无非就是将反复重复的工作(比如有压缩、编译、单元测试、linting等操作)通过脚本来自动化，只需要进行一个命令的执行，即可完成一系列既定执行顺序的操作，可以理解为一系列固定流程的脚本集合，他的庞大主要在于他所提供的插件，在运行grunt的过程中，可以通过对插件的使用，来满足于实际的业务需要！ Gruntfile文件组成😕 这里有一个疑问，就是为毛这个Gruntfile.js要设计为对外暴露一函数对象？这个问题将留到 👇 来进行分析！ 😕 关于Gruntfile文件的组成描述如下： 由包裹的 1⃣ 函数包裹，也就是对外暴露一函数方法，该方法接收一grunt对象； 执行grunt的initConfig方法，并传递对应的配置； 加载这个initConfig配置中所需的任务/目标所依赖的三方任务(loadNpmTasks)； 注册这个配置文件对外暴露的任务API动作； grunt程序的运行过程 😕 关键在于liftup库，它主要用于执行一个CLI脚本程序，这里它写了一 ...

前言 终于轮到关于mongodb的学习了，作为 1⃣ 前端开发佬，想要进入全栈开发的领域，必不可少要涉及到数据库方面的编程技能。关于数据库的一个个人见解就是：它是一种特殊的文件格式，隐藏了对内容的直接访问，提供相关便捷的方法来操作文件内容，提供增删查改逻辑操作，满足业务需求！而本文要学习的这个mongodb是属于NoSQL(Not only SQL，不仅仅是SQL)的一种，它与传统的关系型数据库有很大的区别， 传统的关系型数据库有 👇 的一系列特性： 原子性(Atomicity)事务里的所有操作要么全部做完，要么都不做，事务成功的条件是事务里的所有操作都成功，只要有一个操作失败，整个事务就失败，需要回滚。比如银行转账，从A账户转100元至B账户，分为两个步骤：1）从A账户取100元；2）存入100元至B账户。这两步要么一起完成，要么一起不完成，如果只完成第一步，第二步失败，钱会莫名其妙少了100元 一致性(Consistency)数据库要一直处于一致的状态，事务的运行不会改变数据库原本的一致性约束。例如现有完整性约束a+b=10，如果一个事务改变了a，那么必须得改变b，使得事务 ...

小技能 在习惯了webstorm这ide之后，转战vscode的时候，🈶 着诸多使用上的不习惯，特别是关于这个编码提示，个人已经习惯了webstorm自带的代码提示功能，在上手vscode的时候，发现这个也需要自己来整🌠 可以使用@type来进行日常coding的提示，仅仅需要在项目目录中运行以下脚本： 1npm install --save-dev @types/node 引入types模块进行代码提示，然后对应的再新增一文件：config.js，并在该文件中维护以下内容： 12345{ "compilerOptions": { "types": ["node"] }} 配置完成后，即可看到如下的一个代码提示效果：

前言 在当今的网站编码完成后，要在广域网上能够访问到这个网站，没有https证书，是不可能能够正常被网络上的用户所能够访问到的，必须在有关的网站上申请https证书，挂到对应的服务器上，才能够保证被正常地访问到，那么什么是https证书呢？它与本文所要介绍的tls有什么关联？🌠 HTTPS 是在 HTTP 协议基础上实施 TLS 加密，所有网站以及其他部分 web 服务都使用该协议。因此，任何使用 HTTPS 的网站都使用 TLS 加密。😕 什么是TLS协议呢？它有什么作用？工作过程是怎样的？如何来使用TLS？ 传输层安全性（Transport Layer Security，TLS）是一种广泛采用的安全性协议，旨在促进互联网通信的私密性和数据安全性。TLS 的主要用例是对 web 应用程序和服务器之间的通信（例如，web 浏览器加载网站）进行加密。TLS 还可以用于加密其他通信，如电子邮件、消息传递和 IP 语音 (VoIP) 等 TLS的作用 加密：隐藏从第三方传输的数据； 身份验证：确保交换信息的各方是他们所声称的身份； 完整性：验证数据未被伪造或篡改 TLS的工作过程 ...

前言 平时工作过程中基本上天天都在和TCP打交道，😕 但 🈶 多少童鞋又能够清楚地知晓关于TCP是什么，它的一个工作过程又是怎样的呢？因此，我想整理本次的一个学习文档，来帮助自己更好的理解关于什么是TCP？他 🈶 什么特点？他是怎样工作的？来更好地理解程序/代码的一个工作过程！ 什么是TCP **传输控制协议(Transmission Control Protocol)**，是一种面向连接的、可靠的、基于字节流的传输层通信协议。TCP旨在适应支持多网络应用的分层协议层次结构。 连接到不同但互连的计算机通信网络的主计算机中的成对进程之间依靠TCP提供可靠的通信服务。 应用层向TCP层发送用于网间传输的、用8位字节表示的数据流，然后TCP把数据流分区城适当长度的报文段，之后TCP把结果包传给IP层，由IP层来通过网络将包传送给接收端的TCP层，而且为了保证不丢包，给每一个包分配一个序号，同时序号叶保证了传送到接收端的包按序接收，然后接收端对已成功收到的包发回一个相应的确认(ACK)，如果发送端在合理的往返延(RTT)内未收到确认，那么对应的数据包就被认为是丢包了，然后重新发起传 ...

前言 在经历了一系列前端开发的项目之后，对于npm的了解，只是知道它可以用来安装项目的依赖库，但殊不知关于npm，其他它还有更多更好好玩的地方。首先，我们需要明白的是：NPM借助于CommonJS规范，将CommonJS规范给实现出来，从而实现包的管理 查看帮助 在学习的过程中，主要借助于官方中文文档，来协助自己对于这个npm的一个学习另外，在实际的编码过程中，还可以借助于原本npm脚本命令来学习关于npm的相关命令 查看帮助：npmscript1npm 通过直接输入npm命令，可直接查看到npm所能够支持的所有脚本，然后再借助于npm help <具体命令>来查看具体的命令的作用，以及可接受的参数，比如有 👇 的命令：script1npm help login 安装依赖包 **NPM最常用的命令用法，其执行语句是npm install XXX，这里的XXX代表的就是一个包名，执行该命令之后，将会在当前目录下创建node_modules目录，并将所依赖的包名(这里是XXX)，对应在node_modules目录中创建XXX目录，然后我们可以借助于require(' ...

前言 时间是真实存在的”变量”，必须重视它的一个存在感。假如活到80岁，那么每一个人都将拥有960个月的生命时间(这里我们假定成为960个格子)，每消耗一个月，格子的数量就减少一个，这听起来非常地震撼。既然我们的时间是如此般的有限，那么我觉得更加有必要来深入了解什么是时间？如何才能拥有/赚取更多的时间？ 什么是时间在固定稀缺时间内来赚取更多的时间 马👨曾说过类似这样子一句话：有的人将365天活成了1天。🈯 的是有的人每天都在重复一样的事情，这对于时间的利用效率极为低下，唯有出现了不同的经历之后，才有可能出现新的意义，因此，我们应当活在当下，给自己”赚取”更多的时间。时间的赚取可以分为两个维度来分析： 单位时间内做事的数量 单位时间内做事的类型两者都是必须要在短时间通过大量的练习迅速达到一个再花时间下去，投入与产出比就不划算了的想法，尝试切到不同的事情上去安排时间 每个人的时间都很重要 每个人假定都拥有同等稀缺的960个月的时间，自己的时间重要了，那么别人的时间也是肯定同等地重要，因此在珍惜自己时间的同时，也尽量不去浪费到别人的时间，采用一种共赢的态度。当我们处理一件事情的时 ...

前言 金钱是什么？重新认识金钱有什么好处呢？应该以怎样的一个角度来认识金钱呢？金钱是一般物品等价交换的货币，用于衡量物品的价值！有句话：钱是万恶之源！其实说的有点片面了，我觉得 💰 每个人都like，但是呢，有的人以”非合规”的方式来取得的话，就不大好了，君子爱财，取之有道，说的也正是这个意思。只有真正理解了什么是钱，拥有更多的关于 💰 方面的知识，深知拥有更多的钱也就是拥有了更多的可用来换取更多/更大价值的物品这一简单的道理，用此来达成自己目的，钱就是完成自己目的的过程中的一个媒介而已。💰 无道德属性，只不过赚钱的途径 🈶 ，而且这个道德属性还是主管判断来的！！ 🌠 钱是价值的外在表现，别人付给我钱，是因为我向别人提供了价值，帮助了他们，所以如果我想要赚取更多的钱，意味着我需要提供更多的价值，帮助他人或者帮助更多的人。唯有这样，才是赚取更多的钱的根本路径！ 好运都是自己创造的 存储了足够的让好运发生的契机，穷人与富人的一个最大区别在于穷人没有想要成为富人的野心，如果一个人成长在充满野心的环境中的话，这有可能会倒逼自己成为那个充满野心的人，就像现在的互联网环境一样，行 ...

前言 大家应该都有过这样一个体验，看完一本书，过一阵子就忘，再看一遍，过一阵子再忘，再看再忘，如此反复！为什么会出现如此的浪费时间的反复无效动作呢？我想，应该是知识没有转变成为自己的知识吧，始终只是表面的简单接收书本 📖 中所表达出来的知识而已。👉 那么什么是知识？如何才能够获得知识呢？ 知识的特性 首先，知识拥有一定的属性：客观存在、在一定的知识框架领域内、相对正确。这理解起来也比较简单，比如在数学领域内，1+1=2，而在脑筋急转弯的领域内，1➕1未必等于2，可能是11，也可能是1等等，在不同领域内的知识，它们都是相对真确的！！ 知识的层次结构 首先来看 👆 的一个关于知识的分层结构图，从下而上，依次是 底层知识：通过简单阅读、吸收他人所发达的知识都属于底层知识，获取途径多，获取成本较低，仅需要付出时间即可获得； 加工知识：对简单习得的底层知识进行一个自己的思考、论证，从而转换为自己的方式来表达，并整理成为自己的知识输出； 知识框架：将一系列的加工知识，遵循自己一定的连接规则进行归纳、总结，形成自己的一整套知识框架体系，指导并影响加工知识的获取； 智慧：无形的一套产品， ...

前言 每个人的大脑，其实就像是一个电脑的CPU，正常情况下，它负责接收最基本的数据信息，然后进行一个加工，最后输出目标结果，而人与人之间的差异，在于对同一个基础的信息的录入后，产生了不同的加工方式，由于其逻辑算法的不同(长期的积累而形成的)，导致拥有了不同输出结果，如下图所示： 要从根本上提升自身的认知水平，需要从最基础的大脑的工作过程来分析，一点一点地来剖析自己！👇 从几个方面来认清自己！！ 生而为人，坦然面对 一切从自身出发，自己的情绪、行为的理解，从根本上来理解自己为什么”会”这样子做？为什么”要”这样子做？”会”可能意味着自己是在无意识的情况下做出的，而”要”则表示是自己个人的一个意图，可能带有某种结果意图。👉 从而来更加深入地了解自己、剖析自己，这与之前学习的复盘其实是有所关联的，充分了解自己自身的一个局限性，掌握自己的一个能力范围，从而来制定一个个的计划来尝试突围自己，根据自身的实际能力范围，来一点一点地突破自己的能力界限，达到另外的一个层次境地！！🌠 须知自己也是一个普通的人，有着个人独特的情绪、行为，有大部分普通并无区别，但是，我们可以尝试着让自己在 ...

前言 第一次看见BEM，万脸懵逼，以前从来没有见过，而且也没人提及过，感觉这块 🈶点被前端开发佬们给忽视掉的样子，通过对官方文档的学习，原来我们一直都在接触着BEM，只不过用着舒服，但没有去里面具体深究而已！！ 那么，什么是BEM？为什么要使用BEM？如何来使用BEM呢？ 在开始介绍什么是BEM之前，先来看对比看一下未使用BEM以及使用了BEM之后的效果，比如🈶 以下的一个效果需要用css来实现出来： 👇 首先来看一下在此之前的一个常规写法： ⭐ 从 ☝ 我们可以看出这里的css其实是 🈶不少重复的地方的，接下来进行一波优化改进： 🌟进行了一波的优化之后，首先实现了同样的目标结果，然后将公共的部分进行了一个抽离，让每一次额外的css样式都以追加样式类的方式来加入，而且命名上也比较符合实际的运用场景！！ 那么如果使用了本文所要普及的BEM之后，又会是怎样的一个结果呢？ 🌠 进行了BEM化之后的样式，看起来好像 🆚之前的增加了代码量，但这里遵循了一个规则，就是所有的button ...

今天，跟大家分享一下我自己个人连续读半年的书后，发生了什么变化！ 可能大家都会觉得自己没有时间读书，每天都有做不完的活之类的话语，或者说是道理我都懂，但就是懒！难到就真的只是懒而已吗？其实不是，如果真的懂道理，就不会有这个情况的出现了。 首先这里并不是吹捧自己多厉害，阅读了有多少的书籍之类的，这里⚠️重要的是想跟大家分享一下，在平时忙碌的工作中，抽空来给自己充电🔋，补充自己的知识空缺，努力使自己成为千里马，避免自己怀才不遇，让自己怀的才是老板所想要遇到的！ 1、从如何阅读一本书、到培养自己的逻辑脑 ，从根本上认识自己的大脑🧠的构造以及其工作原理，从大脑的发散性思维，到实际工作项目中的思维导图的绘制，提供了一整套工作流程，得益于军哥平时经常提及的工作方法：在开启每一个产品的需求设计阶段时，将每一个功能点一一列出来，不管多复杂，只要是在闭环关联流程中所涉及到的，都全部列出来，然后将涉及到的各个领域的功能模块进行一一地串联组合，形成完成的整个产品所需要的功能细项，并划分为每个版本闭环功能点，而不是凭空产生需求功能，让每一个功能都有它应当存在的必然性； 2、从不懂管理自己的团队 ...