前言#
前几天我们分析完了@vue/compiler-dom[1]这个包
坏蛋Dan：vue/compiler-dom源码分析学习--final:整理
今天我们来开始分析@vue/compiler-core[2]这个包
入口#
之前有说过,@vue/compiler-dom这个包是基于@vue/compiler-core这个包的,也就是说@vue/compiler-core是我们编译器最底层的包.
这次准备从两个入口来分析
入口1: parse#
还记得我们在分析@vue/compiler-sfc[3]的parse.ts中调用的compiler.parse吗?
我们的第一个入口就是这里.
入口2: baseCompile#
这是一个从@vue/compiler-sfc的compileTemplate(compileScript里也有,inline mode时会执行)分析到@vue/compiler-dom的baseCompile再分析到@vue/compiler-core的问题.
测试用例#
老规矩还是我们的team.vue.
测试用例1: parse.spec.ts#
位置: packages\compiler-sfc\__tests__\parse.spec.ts
import { readFileSync } from 'fs';
import { resolve } from 'path';
const teamStr = readFileSync(resolve(__dirname, './team/team.vue'), 'utf-8');
test('test_template', () => {
const res = parse(teamStr);
expect(res).toBe(teamStr);
})然后我们改下src/parse.ts文件中引入@vue/compiler-dom的路径
这样就ok了.
测试用例2: compileTemplate.spec.ts#
位置: packages\compiler-sfc\__tests__\compileTemplate.spec.ts
import { readFileSync } from 'fs';
import { resolve } from 'path';
const teamStr = readFileSync(resolve(__dirname, './team/team.vue'), 'utf-8');
test('test_template', () => {
const { descriptor } = parse(teamStr);
const res = compile({ filename: 'team.vue', source: descriptor.template?.content as string });
expect(res.source).toBe(teamStr);
}) 然后改下src/compileTemplate.ts中的引用即可.
这样也ok啦~
最后#
这次没有分析流程目标啥的了,我们就直接跟着入口来分析就好.
参考#
- ^@vue/compiler-dom https://github.com/vuejs/core/tree/main/packages/compiler-dom
- ^@vue/compiler-core https://github.com/vuejs/core/tree/main/packages/compiler-core
- ^@vue/compiler-sfc https://github.com/vuejs/core/tree/main/packages/compiler-sfc
编辑于 2022-12-28 16:36・IP 属地广东