vue/compiler-sfc源码分析学习1--如何调试

const compiler_sfc_1 = require("vue/compiler-sfc");
 
const { descriptor, errors } = (0, compiler_sfc_1.parse)(source, {
    filename,
    sourceMap,
});

而跟着进入到vue/compiler-sfc

 export * from '@vue/compiler-sfc'

然后再跟着进入@vue/compiler-sfc中。

先看到package.json文件中的配置

main：这个就不多说了，webpack这类commonjs的打包入口
module：是rollup这类esmodule的打包入口

因为我们用的还是webpack，所以这里进入到compiler-sfc.cjs.js文件中。

但是你一进去你会发现有上万行代码，而且是经过typescript解析器编译过后的，可以读，但是可读性没原来的好看。

所以我们这里就不再跟着这个dist的来分析了。

我们直接去官网拉一下包，然后再自己传数据进去。

git clone https://github.com/1714080902120/core.git
cd core
pnpm install

对的，你没看错，就是pnpm。如果你没用pnpm的话是没法安装依赖的，为什么呢？因为这个包里包含了一些子包（monorepo），如果你安装依赖的话你需要进入到每个包中安装一次，这样就会导致很多包都重复了，而且很繁琐。

以前是基于Lerna[1] + yarn。现在用pnpm[2]就能搞定。

不过即使这个项目没有要求pnpm，我也推荐你的电脑全局安装一个，因为对于办公本来说，能省下很多的内存空间。

ok，不多说。安装完依赖后我们直接去到packages/compiler-sfc包下，找到__tests__，这些就是我们调试的入口。

然后我们来看下根目录（最外层，不是指compiler-sfc包）的package.json

看样子是基于ts-jest来写的测试，而不是自家的vitest[3] 。

老规矩，准备直接F5 写调试环境，但是眼尖的你应该已经看到了其实已经自带了（真贴心~）

那话不多说，我们直接在src/compileScript.ts文件里随便打个断点

然后跑到__tests__/compileScript.spec.ts文件中按下F5或者左边调试面板选择

ok，这就可以开始调试啦。

或者嫌麻烦想只debug某个测试元，你可以安装下jest runner这个vscode拓展，然后

直接开跑就完事了。

参考#

^Lerna http://www.febeacon.com/lerna-docs-zh-cn/routes/basic/concepts.html
^pnpm https://github.com/pnpm/pnpm
^vitest https://vitest.dev/

发布于 2022-11-12 13:11・IP 属地广东

前言#

之前在分析vue-loader的那篇文章里埋了这个坑，但是直到现在我才来分析，主要有以下几个原因。

项目里直接安装下来的包是经过typescript编译过的，代码已经变得奇奇怪怪了，另外就是全部代码都堆到一起，上万行能直接让人心态爆炸。
直接去分析源包，由于源包是typescript写的，所以就需要知道如何调试typescript。
然后我又发现包中带有测试文件，那么如果我们直接通过测试文件来调试，会方便很多。
项目是基于vite的，所以学下vite没什么不对吧doge。
学的过程中发现vite自带的vitest，所以也就顺便学了，没什么不对吧doge。
vitest毕竟还能年轻，还有些bug，所以学下用的较多的jest没什么不对吧doge。
jest学了，但是没法“直接”测试typescript文件，所以又学了一波babel +jest还有ts-jest没什么不对吧doge。

简直太对了

上面提到的文章感兴趣的大佬可以去看下。

坏蛋Dan：vue-loader源码分析学习

坏蛋Dan：如何基于VSCode调试Typescript代码

坏蛋Dan：前端jest学习

坏蛋Dan：如何单元测试typescript

坏蛋Dan：Vitest学习

坏蛋Dan：Vite3基础学习

坏蛋Dan：基于jest debug调试

觉得有用的话请务必点个赞，谢谢！

正文#

让我们先回到vue-loader/dist/index.js中，找到调用compiler-sfc的地方。

const compiler_sfc_1 = require("vue/compiler-sfc");
 
const { descriptor, errors } = (0, compiler_sfc_1.parse)(source, {
    filename,
    sourceMap,
});

而跟着进入到vue/compiler-sfc

 export * from '@vue/compiler-sfc'

然后再跟着进入@vue/compiler-sfc中。

先看到package.json文件中的配置

main：这个就不多说了，webpack这类commonjs的打包入口
module：是rollup这类esmodule的打包入口

因为我们用的还是webpack，所以这里进入到compiler-sfc.cjs.js文件中。

但是你一进去你会发现有上万行代码，而且是经过typescript解析器编译过后的，可以读，但是可读性没原来的好看。

所以我们这里就不再跟着这个dist的来分析了。

我们直接去官网拉一下包，然后再自己传数据进去。

git clone https://github.com/1714080902120/core.git
cd core
pnpm install

以前是基于Lerna[1] + yarn。现在用pnpm[2]就能搞定。

不过即使这个项目没有要求pnpm，我也推荐你的电脑全局安装一个，因为对于办公本来说，能省下很多的内存空间。

ok，不多说。安装完依赖后我们直接去到packages/compiler-sfc包下，找到__tests__，这些就是我们调试的入口。

然后我们来看下根目录（最外层，不是指compiler-sfc包）的package.json

看样子是基于ts-jest来写的测试，而不是自家的vitest[3] 。

老规矩，准备直接F5 写调试环境，但是眼尖的你应该已经看到了其实已经自带了（真贴心~）

那话不多说，我们直接在src/compileScript.ts文件里随便打个断点

然后跑到__tests__/compileScript.spec.ts文件中按下F5或者左边调试面板选择

ok，这就可以开始调试啦。

或者嫌麻烦想只debug某个测试元，你可以安装下jest runner这个vscode拓展，然后

直接开跑就完事了。

参考#

^Lerna http://www.febeacon.com/lerna-docs-zh-cn/routes/basic/concepts.html
^pnpm https://github.com/pnpm/pnpm
^vitest https://vitest.dev/

发布于 2022-11-12 13:11・IP 属地广东