首先， 进入的是 vue导出的 createApp 函数， 它将所有参数都合并为了 args, 并调用了 ensureRenderer 函数并调用了其返回数据上的createApp ， 然后将 args 打散传入 。

按执行流程一步步看vue-loader 源码通常配置webpack 时，我们会配置一个 loader 和 一个 plugin {代码...} 当我们运行 webpack 时， 首先会进入 vue-loader/lib/plugin在apply方法内先挂载了一个钩子, {代码...} 然后读取webpack配置内的所有rule 配置, 并使用 foo.vue 文件名作为测试，查找出能匹配 vue 文件的Rule所在...

因为平时工作中开发h5网页的时候，为了更好适配不同的尺寸， 经常会使用vw单位， 通常是通过 vw = 元素尺寸 / 设计图屏幕尺寸 ， 比如一个元素在 37.5px的设计图下宽 100px, 那得到的 vw就是 37.5 / 375 * 100 = 10vw, 每次都需要这样去计算又特别麻烦， 所想把这个事情给自动化

今天来实现一个简单的打包工具文件依赖src ├─ a.js ├─ b.js ├─ c.js └─ index.js 文件内容如下 {代码...} 思路核心原理是三大阶段 解析-转换-生成解析解析的是文件的依赖关系， 将其全部收集起来，用于之后的转换转换将 es module 导入语法转换为 commonjs 导入语法利用 iife 实现模块化生成将转换完的代码输出到 bundle...

曾几何时，我总是手动的上传到 tinypng 网站进行压缩然后再下载回来，但这个过程感觉特麻烦， 也用过 webpack 的相关插件， 感觉压缩效果不是很理想。 因此决定基于 tinypng 封装一个快捷的工具。

如果你有babel相关知识基础建议直接跳过 前置知识 部分，直接前往 "插件编写" 部分。前置知识什么是AST学习babel, 必备知识就是理解AST。 那什么是AST呢？先来看下维基百科的解释:在计算机科学中，抽象语法树（Abstract Syntax Tree，AST），或简称语法树（Syntax tree），是源代码语法结构的一种抽象表示。它以树状的形...

之前在用babel 的时候有个地方一直挺晕的，@babel/preset-env 和 @babel/plugin-transform-runtime都具有转换语法的能力， 并且都能实现按需 polyfill ,但是网上又找不到比较明确的答案， 趁这次尝试 roullp 的时候试了试.

React中，当父组件中触发setState， 尽管未修改任何 state 中的值也会引起所有子组件的重新渲染， 更何况是修改了某个state

用vue-cli3 重新创建了一个带单元测试的项目， 然后发现运行成功， 于是把该项目的单元测试相关依赖版本拷贝到公司项目里， 于是公司项目成功运行 ， ✌️