腾讯云开发者社区-腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

webpack@4.46.0源码分析

专栏作者

35

文章

25632

阅读量

16

订阅数

3. 「uniapp 如何支持微信小程序环境开发」配置项简化到可以让你一盔全貌之：loader + plugin

vue.js webpack json javascript 打包

当然要配vue-loader啊，.vue文件解析全靠他了。vue-loader的整体流程的分析可以参考我之前的文章：「.vue文件的编译」1. vue-loader@15.8.3 的整体流程

2023-03-10

1.8K0

1. 「uniapp 如何支持微信小程序环境开发」初探uniapp为此做了哪些努力？

vue.js webpack 打包 javascript json

我们当前项目中使用unaipp进行微信小程序的开发，版本是2.0.1-32920211122003。好奇uniapp是如何做到这层转换的。因此从uniapp中抠出了核心逻辑（做了很多简化工作，为了你能更好的理解啊），并写了一个简易demo，来一探究竟。

2023-03-06

9930

2. 「uniapp 如何支持微信小程序环境开发」配置项简化到可以让你一盔全貌之 entry

vue.js json webpack javascript 打包

这里也做了一点变更，uniapp的实现中是如下形式，main.js和页面.vue会命中同一个loader（见node_modules/@dcloudio/webpack-uni-mp-loader/lib/main-new.js），然后在这个loader里面根据是是否有resouceQuery来区别处理（显然main.js没有，而页面.vue有。

2023-03-06

1.1K0

「.vue文件的编译」4. 模板编译之AST的优化

编程算法 c++

如果这个节点是一个普通元素，则遍历它的所有 children，递归执行 markStatic。因为所有的 elseif 和 else 节点都不在 children 中，如果节点的 ifConditions 不为空，则遍历 ifConditions 拿到所有条件中的 block，也就是它们对应的 AST 节点，递归执行 markStatic。在这些递归过程中，一旦子节点有不是 static 的情况，则它的父节点的 static 均变成 false。

2023-02-24

3010

「.vue文件的编译」5. 模板编译之基于AST的代码生成

with中的this是vue实例,_u等等都是挂载在该Vue原型上的，_c是直接挂载vm实例上的。

2023-02-24

4290

「.vue文件的编译」3. 模板编译之AST生成

javascript 网站 vue.js

下面parseHTML方法是用来遍历html字符串的并解析出标签(当然包含标签中的属性)、文本等信息，详细分析参考这里。

2023-02-24

1.1K0

「.vue文件的编译」2. 模板编译之 simple-html-parser.js

html vue.js 编程算法

要想将html转成AST，首先是要正确的解析(遍历)出html的结构，simple-html-parser.js就是做这个事情的（vue@2.6.11就是用的这个库）。在这个解析的过程中会调用一些回调如start、end、chars等，在这些回调中会完成html的AST的构造。

2023-02-24

1.3K0

2. 「uniapp 源码分析」vue-loader@15.8.3 的整体流程

vue.js css webpack ide javascript

通常我们会使用vue-cli来创建一个vue项目，由于vue-cli对常见的开发需求进行了预先配置，做到了开箱即用。但是阻碍碍我们窥探其真面目脚步。当然官方也提供了手动配置的方案。参考

2023-02-24

2.2K0

「小程序微前端」初探

javascript json 网站小程序微信

如果项目复杂，并且很多功能相对独立，那么不同的功能可以交给不同的团队开发，团队本身存在差异如技术选型等。另外的好处是，功能解耦，各功能可以独立开发、测试、部署。

2023-02-24

9090

6. 「vue@2.6.11 源码分析」组件渲染之虚拟DOM上界面

node.js 渲染 vue.js sql

new Vue(..)之后总共有两个大的步骤，第一步是调用vm._init完成组件的各种准备（初始化）工作，然后是开始结合数据与模板实现页面的渲染。vue引入了虚拟DOM技术，这里页面渲染分为两步，将模板和数据（转为了render函数）转为虚拟DOM树，而后再将虚拟DOM树同步到界面上。上一小节已经分析过创建虚拟DOM树的过程，现在我们来看看虚拟DOM是如何同步到界面上的。

2023-02-24

9180

4. 「vue@2.6.11 源码分析」new Vue() 整体流程和组件渲染之前的准备工作

渲染 vue.js 数据库一体机 TData

将组件渲染渲染分为两大步骤：组件信息（事件、方法等等）的初始化，以及组件的渲染。虽然源码中 $mount方法调用放在了_init方法上，但是感觉拿出来好些，毕竟是两个大的步骤。

2023-02-24

6310

5. 「vue@2.6.11 源码分析」组件渲染之创建虚拟DOM

vue.js 编程算法

vue@2.x中用到了虚拟DOM技术，基于第三方虚拟DOM库sanbbdom修改。建议阅读本文之前对snabbdom的使用和原理有一定的了解，可以参考 snabbdom@3.5.1 源码分析。

2023-02-24

9140

8-1. 「webpack源码分析」一个具体案例再次深入看buildChunkGraph的运行过程

javascript 编程算法

queue的初始化及其含义参考上面的变量解释的表格，当前demo只有一个入口即a.js，因此此时queue只有一个元素，module就是'a.js'（entryModule），action是ENTER_MODULE，由于entryModule和其所在的Chunk已经建立过关系，因此跳过ADD_AND_ENTER_MODULE节点，直接来到ENTER_MODULE

2023-02-24

4520

1. 「vue@2.6.11 源码分析」介绍和准备

vue.js 网站 webpack javascript 打包

之所以选择v2.6.11是因为当前项目（腾讯云医）使用uniapp框架（v2.0.1-32920211122003）进行微信小程序开发，uniapp框架提供的vue运行时就是基于v2.6.11进行改造的。

2023-02-24

5930

2. 「vue@2.6.11 源码分析」数据驱动视图（响应式）

编程算法 vue.js

vue 最核心的卖点是数据驱动和组件。浏览器原生提供的交互是通过dom api来修改dom元素，由于浏览器兼容性问题后面的框架如jquery对原生的api进行了一层的封装以屏蔽浏览器的差异性，但并未作出实质的改变。想想这个过程，通常是数据发生变化，js根据变化的情况进行判断而后操作dom。dom变动的本质实际根本上实际是由数据驱动，我在第一家公司数字政通(egova)首次接触了的此类框架knockout。

2023-02-24

5000

1. 「snabbdom@3.5.1 源码分析」snabbdom 介绍和使用

另外一个虚拟DOM库：virtual-dom 解释了为什么(Motivation)会出现虚拟DOM？

2023-02-24

1670

2. 「snabbdom@3.5.1 源码分析」h函数和虚拟DOM

h函数(创建虚拟DOM) h可以理解为createVirtualDom即创建虚拟节点。 export function h(sel, b, c) { //... 由于h函数有多重重载形式，这部分是处理参数 if (children !== undefined) { for (i = 0; i < children.length; ++i) { // 如果孩子是原始类型，直接创建vnode if (is.primitiv

2023-02-24

2050

3. 「snabbdom@3.5.1 源码分析」patch(如何打补丁？)

编程算法云硬盘

看到会返回一个patch函数。看到init内部有很多函数，这些函数大都都是用到api进行DOM操作，而api依赖入参domApi（如果放在外侧，domApi需要作为参数传递）。这里实际上通过闭包私有化这些函数作为方法存在。

2023-02-24

1.7K0

4. 「snabbdom@3.5.1 源码分析」内置模块

html typescript

snabbdom这种实现解构了基础和上层模块能力，上层模块可以按照职责单一原则进行拆分，然后进行注册，通过钩子参与构建过程（怎么感觉和webpack基于tapable类似，是吧）

2023-02-24

4980

5. 「snabbdom@3.5.1 源码分析」Thunks 函数

thunk 函数传入一个选择器，一个 key 作为 thunk 的身份标识，一个返回 vnode 的函数，和一个 state 数组参数。如果调用，那么 render 函数将会接收 state 作为参数传入。

2023-02-24

1840

点击加载更多

社区活动

RAG七天入门训练营

鹅厂大牛手把手带你上手实战

Python精品学习库

代码在线跑，知识轻松学

博客搬家 | 分享价值百万资源包

自行/邀约他人一键搬运博客，速成社区影响力并领取好礼

技术创作特训营·精选知识专栏

往期视频·千货材料·成员作品最新动态