vue/compiler-sfc源码分析学习10：如何处理template--day1

前言#

前面分析完了如何处理script，现在按照顺序我们来看下是如何处理template的。

坏蛋Dan：vue/compiler-sfc源码分析学习--part2:如何处理script--final章节整理

入口#

如果看过我之前的vue-loader源码分析，你应该知道处理这个ast是用的啥--templateLoader识别到.vue&&type=template然后再请求处理。

我们进入到node_modules\vue-loader\dist\templateLoader.js中

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const qs = require("querystring");
const loaderUtils = require("loader-utils");
const formatError_1 = require("./formatError");
const descriptorCache_1 = require("./descriptorCache");
const resolveScript_1 = require("./resolveScript");
const util_1 = require("./util");
const compiler_sfc_1 = require("vue/compiler-sfc");
// Loader that compiles raw template into JavaScript functions.
// This is injected by the global pitcher (../pitch) for template
// selection requests initiated from vue files.
const TemplateLoader = function (source, inMap) {
    var _a;
    source = String(source);
    const loaderContext = this;
    // ...省略无关的参数
    const query = qs.parse(loaderContext.resourceQuery.slice(1));
    const scopeId = query.id;
    const descriptor = (0, descriptorCache_1.getDescriptor)(loaderContext.resourcePath);
    const script = (0, resolveScript_1.resolveScript)(descriptor, query.id, options, loaderContext);
    const compiled = (0, compiler_sfc_1.compileTemplate)({
        source,
        filename: loaderContext.resourcePath,
        inMap,
        id: scopeId,
        scoped: !!query.scoped,
        slotted: descriptor.slotted,
        isProd,
        ssr: isServer,
        ssrCssVars: descriptor.cssVars,
        compiler: templateCompiler,
        compilerOptions: Object.assign(Object.assign(Object.assign({}, options.compilerOptions), { scopeId: query.scoped ? `data-v-${scopeId}` : undefined, bindingMetadata: script ? script.bindings : undefined }), (0, util_1.resolveTemplateTSOptions)(descriptor, options)),
        transformAssetUrls: options.transformAssetUrls || true,
    });
    // ...省略error和tips
    const { code, map } = compiled;
    loaderContext.callback(null, code, map);
};
exports.default = TemplateLoader;

代码是tsc编译过的，但是不影响，毕竟不像我们分析的目标--@vue/compiler-sfc那么大。

代码非常简单，调用@vue/compiler-sfc的compileTemplate方法，将源码souce转换成code。

这个code就是render functions，我们来看下最终数据

img_render_functions

这就是我们的最终目标，但它不是现在分析的。我们先跟着我们刚找到的入口compileTemplate去到@vue/compiler-sfc中开启调试之旅。

另外有一点需要注意的，那就是这个时候的script已经处理完了。

是不是和我们刚分析完的script的最终样子差不多？

发布于 2022-12-06 15:34・IP 属地广东

入口#

如果看过我之前的vue-loader源码分析，你应该知道处理这个ast是用的啥--templateLoader识别到.vue&&type=template然后再请求处理。

我们进入到node_modules\vue-loader\dist\templateLoader.js中

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const qs = require("querystring");
const loaderUtils = require("loader-utils");
const formatError_1 = require("./formatError");
const descriptorCache_1 = require("./descriptorCache");
const resolveScript_1 = require("./resolveScript");
const util_1 = require("./util");
const compiler_sfc_1 = require("vue/compiler-sfc");
// Loader that compiles raw template into JavaScript functions.
// This is injected by the global pitcher (../pitch) for template
// selection requests initiated from vue files.
const TemplateLoader = function (source, inMap) {
    var _a;
    source = String(source);
    const loaderContext = this;
    // ...省略无关的参数
    const query = qs.parse(loaderContext.resourceQuery.slice(1));
    const scopeId = query.id;
    const descriptor = (0, descriptorCache_1.getDescriptor)(loaderContext.resourcePath);
    const script = (0, resolveScript_1.resolveScript)(descriptor, query.id, options, loaderContext);
    const compiled = (0, compiler_sfc_1.compileTemplate)({
        source,
        filename: loaderContext.resourcePath,
        inMap,
        id: scopeId,
        scoped: !!query.scoped,
        slotted: descriptor.slotted,
        isProd,
        ssr: isServer,
        ssrCssVars: descriptor.cssVars,
        compiler: templateCompiler,
        compilerOptions: Object.assign(Object.assign(Object.assign({}, options.compilerOptions), { scopeId: query.scoped ? `data-v-${scopeId}` : undefined, bindingMetadata: script ? script.bindings : undefined }), (0, util_1.resolveTemplateTSOptions)(descriptor, options)),
        transformAssetUrls: options.transformAssetUrls || true,
    });
    // ...省略error和tips
    const { code, map } = compiled;
    loaderContext.callback(null, code, map);
};
exports.default = TemplateLoader;

代码是tsc编译过的，但是不影响，毕竟不像我们分析的目标--@vue/compiler-sfc那么大。

代码非常简单，调用@vue/compiler-sfc的compileTemplate方法，将源码souce转换成code。

这个code就是render functions，我们来看下最终数据

img_render_functions

这就是我们的最终目标，但它不是现在分析的。我们先跟着我们刚找到的入口compileTemplate去到@vue/compiler-sfc中开启调试之旅。

另外有一点需要注意的，那就是这个时候的script已经处理完了。

是不是和我们刚分析完的script的最终样子差不多？

发布于 2022-12-06 15:34・IP 属地广东