vite 虚拟模块初识

介绍：
Vite 中的虚拟模块 Vite 是一个现代化的构建工具，旨在通过利用浏览器原生 ES 模块的可用性以及使用编译为原生语言编写的 JavaScript 工具来解决一些问题。
用途：
1. 自动生成路由配置： 在一些前端框架（如 Vue 和 React）中，虚拟模块可以用来动态生成路由配置。通常，我们需要手动维护路由表，但使用虚拟模块，你可以根据项目文件结构自动生成路由配置。这样，开发者无需手动添加路由，可以专注于开发应用功能。
2. 提供动态数据层： 虚拟模块可以在构建时根据不同环境或配置动态生成应用所需的数据。例如，你可以根据环境变量或配置文件生成数据访问接口。这种灵活性使得你可以轻松切换数据层，而不需要修改源代码。
3. 优化代码拆分和按需加载： 通过虚拟模块技术，你可以更轻松地实现代码拆分和按需加载。开发者可以根据需要动态生成模块，从而优化应用性能和加载时间。这对于大型应用或需要快速加载的单页应用非常有用。
4. 集成第三方服务： 虚拟模块可以用于集成第三方服务，例如 API 调用、数据分析等。通过虚拟模块，你可以将这些服务封装为可重用的模块，方便集成和维护。

使用：
新建个文件叫visualModule.ts

内容如下：
创建一个虚拟模块：

export default function myPlugin() {
  const ModelId = "virtual:my-test-module";
  /**
   * 你可以使用\0,也可以不使用\0来创建一个虚拟模块的名称，这个名称外部使用的时候是：
   *  import { msg1, msg2 } from "virtual:my-test-module";这样访问
   * 他的作用是 告诉rollup，这是一个虚拟模块，而不是一个文件。
   * 这是为了避免与生态系统中的其他插件发生冲突
   */
  const resolveModuleId = "\0" + "MyTestModule";

  return {
    name: "my-test-module-plugin",
    resolveId(id) {
      if (id === ModelId) {
        return resolveModuleId;
      }
    },
    load(id) {
      if (id === resolveModuleId) {
        // 这里可以写任何代码,但是不能有 import 语句
        return `
              export const msg1 = ()=>"hello msg1"
              export const msg2 = "hello msg2"
            `;
      }
    },
  };
}

 

使用它：

import { msg1, msg2 } from "virtual:my-test-module";

console.log(msg1(), msg2);

输出返回：

'hello msg1' 'hello msg2'