vite 虛擬模組初識

洛晨随风發表於2024-11-13
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'

相關文章