Vite插件学习

最近在写移动端组件库时，看了Vant组件库的代码。里面有一个让我很好奇，那就是如何import到没有下载的包的，代码如下 import { config } from 'site-desktop-shared'; 然后我发现这是在Vite配置文件里注册了一个插件，然后吸引了我的注意。

了解vite插件

从vite官方文档了解，vite有通用钩子和单独的钩子，先简单从vant的插件代码看，它使用了两个钩子，resolved(),load(),然后从官方文档中了解到两个钩子都是通用钩子，并且钩子会在每个传入模块请求时被调用 所以这也就是为什么传入的模块并'不存在'也可以import.然后从Rollup文档的resolveId钩子中了解到第一个参数source就是模块的名字，所以我们可以在这个钩子中进行判断，假如存在模块名字，就返回一个改名字特定的名称，然后传给load钩子。Rollup文档的load钩子中写的它的参数id就是resolved返回的名称，拿到名称后来预加载对应的模块。这样目的就达到了。真不戳！又学到了。

看看vant的此段代码

function vitePluginGenVantBaseCode(): PluginOption {
  const virtualMobileModuleId = 'site-mobile-shared';
  const resolvedMobileVirtualModuleId = `vant-cli:${virtualMobileModuleId}`;

  const virtualDesktopModuleId = 'site-desktop-shared';
  const resolvedDesktopVirtualModuleId = `vant-cli:${virtualDesktopModuleId}`;

  const virtualPackageStyleModuleId = /package-style/;
  const resolvedPackageStyleVirtualModuleId = `vant-cli${virtualPackageStyleModuleId}index.${CSS_LANG}`;

  return {
    name: 'vite-plugin(vant-cli):gen-site-base-code',
    resolveId(id) {
      if (id === virtualMobileModuleId) {
        return resolvedMobileVirtualModuleId;
      }

      if (id === virtualDesktopModuleId) {
        return resolvedDesktopVirtualModuleId;
      }

      if (virtualPackageStyleModuleId.test(id)) {
        return resolvedPackageStyleVirtualModuleId;
      }
    },
    load(id) {
      switch (id) {
        case resolvedMobileVirtualModuleId:
          return genSiteMobileShared();
        case resolvedDesktopVirtualModuleId:
          return genSiteDesktopShared();
        case resolvedPackageStyleVirtualModuleId:
          return genPackageStyle();
        default:
          break;
      }
    },
  };
}

下次，继续学习Vite插件，试试写一个这样的插件，打卡下班！美滋滋！