function esbuildScanPlugin(){
  return {
     setup(){
       build.onResolve({},()=>{
         // 触发vite 插件 resovleId
          const resolved = await resolve(id, importer, {
            custom: {
              depScan: { loader: pluginData?.htmlType?.loader },
            },
           })
           if (resolved) {
             // 关键
            if (resolved.includes('node_modules') || include?.includes(id)) {
              // dependency or forced included, externalize and stop crawling
              if (isOptimizable(resolved, config.optimizeDeps)) {
                depImports[id] = resolved
              }
              return externalUnlessEntry({ path: id })
            }
       })
     }
  }
}

const htmlTypesRE = /\.(html|vue|svelte|astro|imba)$/;
// html types: extract script contents -----------------------------------
build.onResolve({ filter: htmlTypesRE }, async ({ path, importer }) => {
  // vite的插件容器
  const resolved = await resolve(path, importer);
  if (!resolved) return;
  // It is possible for the scanner to scan html types in node_modules.
  // If we can optimize this html type, skip it so it's handled by the
  // bare import resolve, and recorded as optimization dep.
  if (
    resolved.includes("node_modules") &&
    isOptimizable(resolved, config.optimizeDeps)
  )
    return;
  return {
    path: resolved,
    namespace: "html",
  };
});

// extract scripts inside HTML-like files and treat it as a js module
build.onLoad({ filter: htmlTypesRE, namespace: "html" }, async ({ path }) => {
  let raw = fs.readFileSync(path, "utf-8");
  // Avoid matching the content of the comment
  raw = raw.replace(commentRE, "<!---->");
  const isHtml = path.endsWith(".html");
  // 这个正则里面就包括了.vue文件内 script 的 解析
  const regex = isHtml ? scriptModuleRE : scriptRE;
  regex.lastIndex = 0;
  let js = "";
  let scriptId = 0;
  let match: RegExpExecArray | null;
  while ((match = regex.exec(raw))) {
    const [, openTag, content] = match;
    const typeMatch = openTag.match(typeRE);
    const srcMatch = openTag.match(srcRE);
    if (srcMatch) {
      const src = srcMatch[1] || srcMatch[2] || srcMatch[3];
      // 关键点 拼成 import 的语法
      js += `import ${JSON.stringify(src)}\n`;
    } else if (content.trim()) {
      // The reason why virtual modules are needed:
      // 1. There can be module scripts (`<script context="module">` in Svelte and `<script>` in Vue)
      // or local scripts (`<script>` in Svelte and `<script setup>` in Vue)
      // 2. There can be multiple module scripts in html
      // We need to handle these separately in case variable names are reused between them

      // append imports in TS to prevent esbuild from removing them
      // since they may be used in the template

      // 对内联script的处理
      const contents =
        content + (loader.startsWith("ts") ? extractImportPaths(content) : "");

      const key = `${path}?id=${scriptId++}`;
      if (contents.includes("import.meta.glob")) {
        scripts[key] = {
          loader: "js", // since it is transpiled
          contents: await doTransformGlobImport(contents, path, loader),
          pluginData: {
            htmlType: { loader },
          },
        };
      } else {
        scripts[key] = {
          loader,
          contents,
          pluginData: {
            htmlType: { loader },
          },
        };
      }

      const virtualModulePath = JSON.stringify(virtualModulePrefix + key);

      const contextMatch = openTag.match(contextRE);
      const context =
        contextMatch && (contextMatch[1] || contextMatch[2] || contextMatch[3]);

      // Especially for Svelte files, exports in <script context="module"> means module exports,
      // exports in <script> means component props. To avoid having two same export name from the
      // star exports, we need to ignore exports in <script>
      if (path.endsWith(".svelte") && context !== "module") {
        js += `import ${virtualModulePath}\n`;
      } else {
        js += `export * from ${virtualModulePath}\n`;
      }
    }
  }

  // This will trigger incorrectly if `export default` is contained
  // anywhere in a string. Svelte and Astro files can't have
  // `export default` as code so we know if it's encountered it's a
  // false positive (e.g. contained in a string)
  if (!path.endsWith(".vue") || !js.includes("export default")) {
    js += "\nexport default {}";
  }

  return {
    loader: "js",
    contents: js,
  };
});

{
  "vue": "D:/app/vite/node_modules/.pnpm/vue@3.2.37/node_modules/vue/dist/vue.runtime.esm-bundler.js",
  "vue/dist/vue.d.ts": "D:/app/vite/node_modules/.pnpm/vue@3.2.37/node_modules/vue/dist/vue.d.ts",
  "lodash-es": "D:/app/vite/node_modules/.pnpm/lodash-es@4.17.21/node_modules/lodash-es/lodash.js"
}