less的使用

前端/ css/ les
less的使用

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

踩了marked.js的坑后,我选择了markdown-it

前端/ javascript
踩了marked.js的坑后,我选择了markdown-it

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

prettier的学习与使用

前端/ lint
prettier的学习与使用

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

如何使用stylelint

前端/ lint
如何使用stylelint

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

如何使用eslint

前端/ lint
如何使用eslint

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

使用express+hbs搭建自己的服务端渲染框架

javascript/ 模版引擎/ nodejs/ express
使用express+hbs搭建自己的服务端渲染框架

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

chatGPT体验感悟

生活点滴/ 个人提升
chatGPT体验感悟

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

HtmlWebpackPlugin

webpack/ plugin
HtmlWebpackPlugin

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

webpack中如何加载loader的

webpack/ loader
webpack中如何加载loader的

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

webpack中的模块管理

webpack
webpack中的模块管理

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

DefinePlugin在webpack中是如何使用的

webpack/ plugin
DefinePlugin在webpack中是如何使用的

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

AssetModulesPlugin.js

webpack/ plugin
AssetModulesPlugin.js

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

webpack中的代码生成插件

webpack/ plugin
webpack中的代码生成插件

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

Module与其家族们

webpack/ module
Module与其家族们

前言 Module,作为webpack中的基本模块单元,继承于DependenciesBlock,使其具备缓存其他模块而形成的依赖关系,也就是说,webpack中的关于模块的定义声明皆来自于此!我们所定义的一个个文档都是一个个的模块,模块之间允许互相依赖,而依赖在程序中的表现形式,则是以DependenciesBlock中的Dependency[]数组来存储的 Depe...

EntryOptionPlugin

webpack/ plugin
EntryOptionPlugin

前言 作为实际开始编译的入口,该插件由webpack的核心默认插件自动加载,无需额外通过配置文件引入! 入口的开始 通过对该插件的代码阅读后发现,该插件主要针对两个钩子容器函数设置监听动作 compiler.hooks.compilation compiler.hooks.make 🌠 下面我们关键分析一下这个compiler.hooks.make触发时,做了...

webpack中的AsyncQueue

webpack/ AsyncQueue
webpack中的AsyncQueue

前言 在阅读到Compilation的代码执行过程时,发现有一个隐藏的异步队列执行者,😕 这里为啥要单独整一篇文章来阐述这个异步队列执行者呢?我觉得应该是在于它的一个比较独特的设计理念打动了我,下面就来具体分析一下并尝试来使用这个异步队列的执行者!添加完成一个元素后,自动执行一个对应的回调动作,并能够实现与父AsyncQueue对象共享的“线程队列”资源 如何使用?1...

DllReferencePlugin

webpack/ plugin
DllReferencePlugin

前言 官方链接 DllPlugin一般与DllReferencePlugin配套使用, 😕 为什么这么说呢? DllPlugin一般用来在webpack中创建一个单独的dll-only-bundles,同时生成一个名为manifest.json文件; DllReferencePlugin则是会通过引用上述第一步所创建出来的manifest.json文件,来告知如何加载...

webpack中的Compilation

webpack/ Compilation
webpack中的Compilation

前言官方链接 webpack中真正的”编译器执行者”,Compilation实例能够访问所有的模块和它们的依赖(大部分是循环依赖)。 它会对应用程序的依赖图中所有模块, 进行字面上的编译(literal compilation)。 在编译阶段,模块会被加载(load)、封存(seal)、优化(optimize)、 分块(chunk)、哈希(hash)和重新创建(rest...

NormalModuleReplacementPlugin

webpack/ plugin
NormalModuleReplacementPlugin

前言官方链接 NormalModuleReplacementPlugin 允许我们将与 resourceRegExp 匹配的资源替换为 newResource。如果 newResource 是相对的,则它是相对于先前资源解析的。如果 newResource 是一个函数,它应该覆盖所提供资源的请求属性。☝ 官方的描述有点绕,简而言之,就是模块的在加载之前进行一个替换,这个...

×
  • {title}
  • 这一句 是 在 2015.09.23 23:05:17 收藏的!