皮皮网

1.vue3源码学习--编译阶段汇总
2.Vue集成three.js过程记录
3.Loader源码分析-Vue Loader v15
4.vue-loader源码分析学习
5.vue-loader与vue-cli3
6.Vue3核心源码解析 (一) ： 源码目录结构

vue3源码学习--编译阶段汇总

       从vue-loader开始，我们逐步探索vue/compiler-core包的源码，完成了编译阶段的解析（忽略了compiler-ssr部分）。

       涉及的包包括：

       vue-loader：基于webpack的入口

       vueLoaderPlugin：处理核心操作

       @vue/compiler-sfc：处理script、template和style

       compiler-dom：处理template，与compiler-core协同工作

       compiler-core：处理template的放置挂机文字游戏源码核心部分

       vue-loader首先安装vueLoaderPlugin，主要负责匹配资源并调用相应方法。script部分通过@vue/compiler-sfc的compileScript处理，其他如template和style则根据其类型调用相应处理函数。

       编译流程中，script通过babel将JavaScript转换为AST节点，然后进行处理。template则通过compiler-dom和compiler-core转换为浏览器可识别的JavaScript代码。CSS变量和scopeId也是在这个阶段进行处理的。

       在dev模式下，render function会被分离出来以支持热模块替换（HMR），而prod模式下，这些代码会被整合到setup函数中，以提高代码效率。

       最后，总结整个编译阶段，对Vue源码有了深入理解，不再是神秘的魔法，而是清晰的流程。希望这些内容对您有所帮助，海螺模板源码祝大家新春快乐！

Vue集成three.js过程记录

       客户提出需求，希望实现3D模型与前端元素的结合展示。为解决此问题，团队开始研究three.js库。

       首先，通过npm安装three.js库。

       为了实现3D模型的展示，团队开始学习如何导入模型。尝试使用obj文件，但导出和导入过程中遇到了困难。后来了解到，新版本的three.js提供了可以直接导入的loader，大大简化了操作。

       团队发现导入模型的代码如下：

       引入必要的loader：

       javascript

       import * as THREE from 'three'

       import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

       import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader'

       import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader'

       加载场景、摄像机等元素。

       加载模型并进行预加载：

       javascript

       new MTLLoader().load('/static/test.mtl', materials => {

        materials.preload()

        new OBJLoader().setMaterials(materials).load('/static/test.obj', obj => {

        obj.scale.set(0., 0., 0.)

        obj.position.set(0, 0, 0)

        scene.add(obj)

        })

       })

       针对模型过大问题，尝试了多种压缩方案。经过一番努力，最终采用gltf格式文件和gltf-pipeline进行压缩，成功将文件大小从百兆缩小至十几兆。

       使用gltf文件和gltf-pipeline的代码如下：

       引入draco库：

       javascript

       import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader'

       设置加载器并加载gltf文件：

       javascript

       this.dracoLoader = new DRACOLoader()

       this.dracoLoader.setDecoderPath('../libs/draco')

       this.loader = new GLTFLoader()

       if (this.url.includes('glb')) {

        this.loader.setDRACOLoader(this.dracoLoader)

       }

       this.loader.load('/static/test.glb', function (obj) {

        scene.add(obj.scene)

       }, function (xhr) {

        console.log((xhr.loaded / xhr.total * ) + '%loaded')

       }, function (error) {

        console.error(error, 'load error!')

       })

       尽管文件大小问题得到解决，但在满足客户苛刻需求方面仍需进一步优化。后续将探索更多解决方案。恶搞代码源码

Loader源码分析-Vue Loader v

       vue-loader 是什么

       简单来说，vue-loader 的作用是将 .Vue 文件编译成 .js 文件，这样就可以在浏览器中运行，同时也可以在 node 环境中使用 vue-server-render 进行运行。

       vue-loader 的改动

       相较于之前的版本，vue-loader 进行了许多重要的改动，具体细节可以参考官方的迁移指南。

       vue-loader 的编译过程

       vue-loader 的处理流程可以大致分为以下几个部分：

       vue-loader 入口函数

       vue-loader 的入口代码并不多，我将入口函数的流程绘制了一个简单的 UML 图，通过这个图可以快速对流程有一个初步的了解。

       vue-loader 入口函数主要做了以下几件事：

       通过上面的 UML 图可以看出，.vue 文件初次编译时会走生成 code 的流程，那么生成的 code 究竟是什么呢？

       通过调试 vue-loader，将 code 打印出来，仔细观察图中红色框中的部分。

       可以发现在几句 import 中，都是从 source.vue 获取对象，并且路径上携带了参数，这些参数就是 resourceQuery，type 有三种不同类型，分别是 template | script | styles。

       这些 import 会继续触发新一轮的 vue-loader 执行，于是接下来就到了途中 resourceQuery 有 type 的情况。

       下面是app服务源码进行了适当删减后的源码，保留了上述涉及到的代码，对代码本身感兴趣的可以浏览。

       parse .vue 组件解析

       parse 方法内部处理了 vue SFC 文件，前面提到过，编译的方法默认是通过 vue-template-compiler 处理。

       主要是通过 compiler.parseComponent 函数对 .vue 文件进行编译。

       那么 vue-template-compiler 究竟是什么呢？

       在了解 vue-template-compiler 之前，我对 vue 的编译过程有些了解，既然它们都是处理 vue SFC 文件，那么它们会不会是同一份代码呢？抱着疑问的态度，我们先看看 vue-template-compiler 的 readme.md。

       This package is auto-generated. For pull requests please see src/platforms/web/entry-compiler.js.

       在 readme.md 中可以看到官方对它的说明，实际上 vue-template-compiler 是一份自动生成的代码，它本质就是 vue 中的 sfc/parse。

       但今天的主角并不是 vue-template-compiler，也不是 sfc/parse，我会在后面的篇章中对 vue build 的过程做一个详细的解读。

       parse 流程 vue-loader 推导策略

       在 vue-loader 入口函数分析中已经可以了解到，入口函数最终会生成一个 code，这个 code 包含了几个 import 语句，import 语句都含有 vue 标识并且标明了不同的分块类型。

       这些 import 语句会被 VueLoaderPlugin 捕捉并做推导策略处理。

       VueLoaderPlugin

       老规矩，先来看 VueLoaderPlugin 的php收集源码代码。

       代码删减后及其简单，就一件事：注入 pitcher-loader，用于处理 vue 分块 loader 推导。

       pitcher-loader

       VueLoaderPlugin 的主要作用就是注入 pitcher-loader，由此可知，实际处理推导过程的是 pitcher-loader，VueLoaderPlugin 只不过是一个 loader 的注入器。

       那么 pitcher-loader 是怎么做 loader 推导的呢？

       前面提到入口函数生成的 code，code 中包含 import 语句。

       这些 import 语句会触发 pitcher-loader，pitcher 根据 resourceQuery 来区分不同块，并生成不同的 loader request。

       loader 推导流程总结

       把上述过程汇聚成一张 UML 图，通过这张图可以对整个流程有一个清晰的认识。

       vue-loader 的整体过程可以划分为以下几个部分：

vue-loader源码分析学习

       Vue-loader源码深入解析

       Webpack配置中的loader调用和执行位置是在NormalModule的_doBuild方法中，当module需要转换为source时，会用到loader-runner包。本文将逐步分析loader的核心代码。

       首先，loader的入口点涉及到source的处理，它包含了整个.vue文件的代码。VueLoaderPlugin的作用在于检查版本差异并加载相应的文件，以适应Webpack 5的更新。

       接着，代码中的一大块内容是关于module.rules的处理，这些规则与配置文件中定义的类似，如test、include、exclude和resolve。RuleSetCompiler是一个处理rule集合的处理器，它负责收集和转换规则字段，生成带有condition和effects的集合。

       loader会监听compiler的compilation和loader hooks，确保插件在vue-loader之前执行。之后，会遍历配置的规则，对不符合特定条件的规则进行报错处理，并处理vue-loader相关的规则，添加自定义字段。

       在cloneRule方法中，关键步骤是调用ruleSetCompiler.compileRule，这个方法会执行hook并处理每个rule，将规则的特定字段转换成最终的条件和效果。整个过程确保了规则的正确匹配和处理。

       总结来说，rulePlugin扩展配置文件中的rule，而ruleSetCompiler负责管理和执行这些规则，生成最终的处理逻辑。在处理过程中，巧妙地利用闭包缓存和query判断，确保了对vue资源的精确匹配和处理。

       最后，VueLoaderPlugin还针对template、js和ts文件的处理进行了特殊规则设置，确保render function与其他用户代码得到相同的处理，同时通过pitcher处理vue块请求和资源顺序调整。

vue-loader与vue-cli3

        查看文档

        Vue Loader 是一个 webpack 的 loader(在vue-cli中已自动集成)，以下功能都依赖于Vue Loader:

        当 Vue Loader 编译单文件组件中的 <template> 块时，它也会将所有遇到的资源 URL 转换为 webpack 模块请求。因此动态添加/更改的资源非绝对路径需要使用 require 处理。

        默认下列标签/特性的组合会被转换，且这些组合时可以使用 transformAssetUrls 选项进行配置的。

        ( 如配置额外的 <style> 块使用 css-loader ，也可以使 CSS 中的资源 URL 变成模块请求。)

        Vue Loader 会根据 lang 特性以及你 webpack 配置中的规则自动推断出要使用的其他 loader。

        有些预处理器对 >>> 不支持，此时可以使用 /deep/ 或 ::v-deep 操作符取而代之——两者都是 >>> 的别名。

        或直接

        可自行在 process.env 对象下定义需要使用的变量

        一般约定 NODE_ENV 为环境变量名称

        在项目中可以根据不同环境值进行差异化配置

        在vue-cli3构建的项目中,默认 num run start 环境值为 development , num run build 环境值为 production ,当需要其他环境时,可安装 cross-env 插件

        并在package.json中进行如下配置

        则 npm run test 时,获取的环境值即为 test

        在根目录下创建 vue.config.js 中进行配置

Vue3核心源码解析 (一) ： 源码目录结构

       通过软件框架源码阅读，深入理解框架运行机制，API设计、原理及流程成为开发者进阶的关键。Vue 3源码相较于Vue 2版本的改进明显，采用Monorepo目录结构，引入TypeScript作为开发语言，新增特性和优化显著。

       启动Vue3源码，最新版本为V3.3.0-alpha.5。下载后进入core文件夹，使用Yarn进行构建。安装依赖后，执行npm run dev启动调试模式，可直观查看完整的源代码目录结构。

       核心模块包括compiler-core、compiler-dom、runtime-core、runtime-dom。compiler模块在编译阶段负责将.vue文件转译成浏览器可识别的.js文件，runtime模块则负责程序运行时的处理。reactivity目录内是响应式机制的源码，遵循Monorepo规范，每个子模块独立编译打包，通过require引入。

       构建Vue 3版本可使用命令，构建结果保存在core\packages\vue\dist目录下。选择性构建可通过命令实现，具体参数配置在core/rollup.config.js中查看。对于客户端编译模板，需构建完整版本，而使用Webpack的vue-loader时，.vue文件中的模板在构建时预编译，无需额外编译器。浏览器直接打开页面时采用完整版本，构建工具如Webpack引入运行时版本。Vue的构建脚本源码位于core/scripts下。

Webpack 案例 —— vue-loader 原理分析

       两个核心问题：一、Vue SFC 文件包含了多种内容格式：样式、脚本、模板以及其他自定义块，Vue-loader 如何针对这些不同格式的内容进行处理和解析？二、针对Vue SFC中不同内容块的解析，Vue-loader 如何复用其他loader，特别是针对less 定义的样式块时，Vue-loader 是如何调用less-loader 来处理的？

       首先，我们需要理解Vue-loader的工作原理。它主要包含了三大部分：插件、预处理阶段和核心内容处理阶段。在处理过程中，Vue-loader 通过插件扩展了 webpack 配置信息，实现对SFC的高效解析。

       预处理阶段，Vue-loader 插件通过apply函数在webpack的配置中插入动态loader（pitcher），并且复制原有的loader规则，使新创建的规则能够识别SFC内容中的不同格式块。这里的pitcher和原有的loader规则配合，为后续的解析过程打下了基础。

       接着，我们来到核心内容处理阶段。在这一阶段，经过一系列loader的逐层处理，Vue-loader 会分别针对样式、脚本、模板以及其他自定义块完成各自的转换。例如，在引入less 定义的样式块时，经过pitcher处理后的import路径会被less-loader进一步解析，实现样式定义到实际样式代码的转换。

       简而言之，Vue-loader 通过巧妙地利用loader的复用和插件的动态扩展，不仅简化了处理流程，提高了代码的可读性和可维护性，还保证了对于不同格式内容块的高效解析。在处理过程中，遵循了webpack loader编写的一般规范，使其在应用中具有较高的通用性。

       综上所述，Vue-loader 基于其设计原理和运行机制，成功实现了针对Vue SFC中不同类型内容块的高效解析与复用其他loader的功能。不仅简化了开发人员的工作流程，还提升了代码的扩展性和灵活度，是webpack生态中一个非常实用且强大的组件。