Vite引入虛擬文件的實(shí)現(xiàn)方法

這篇文章主要講解了“Vite引入虛擬文件的實(shí)現(xiàn)方法”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“Vite引入虛擬文件的實(shí)現(xiàn)方法”吧！

目錄

• 背景
  

• 引入虛擬文件
  

• 例子
  

• 文檔
  

• Typescript支持
  

• 總結(jié)
  

背景

在新項(xiàng)目升級vue3以后,自然而然的就把vue-cli&webpack更換成了vite,不得不說vite真的很香,不僅編譯速度剛剛的,而且在vue3的新功能上也有更好的支持.

不過在開發(fā)過程中也遇到了一些問題

在看到vite-plugin-pages插件之后,突然看到這樣的寫法:

import routes from "virtual:generated-pages";

其實(shí)在使用很多vite插件的時(shí)候,發(fā)現(xiàn)在引用中存在這樣的用法:

import xxx from "virtual:xxx";

那么這個(gè)virtual:xxx怎么之前沒有見過,這明顯不是一個(gè)npm上面的包,那會是什么?

引入虛擬文件

在看了vite的文檔之后才明白,原來這是一個(gè)引入虛擬文件功能,他可以生成一個(gè)虛擬的文件讓你來引入.

在vite文檔的插件API中引入一個(gè)虛擬文件處說到這個(gè)功能,章節(jié)里面有寫到支持引入你一個(gè)虛擬文件,也就是這個(gè)文件并不存在,而是通過代碼臨時(shí)生成的.

而這個(gè)生成是通過vite的插件來完成,也就是說在nodejs環(huán)境中來生成對應(yīng)的虛擬文件

vite-plugin-pages就是通過這個(gè)功能實(shí)現(xiàn)的,他首先在編譯時(shí)遍歷對應(yīng)的頁面目錄,根據(jù)目錄結(jié)構(gòu)和文件名的命名規(guī)則來動態(tài)生成對應(yīng)的路由表,這樣就很好的完成了本地目錄結(jié)構(gòu)到動態(tài)路由之間的良好交互.

其實(shí)在nuxt中也有動態(tài)路由的功能,不過他可沒有虛擬引入,在項(xiàng)目啟動前來動態(tài)修改webpack配置,使用definePlugin來將路由表傳遞給前端代碼的.

通過引入虛擬文件的功能,我們就避免了需要通過傳遞修改常量的方式,將對應(yīng)的數(shù)據(jù)傳遞給前端代碼.

而除了傳遞常量,虛擬引入可以做的更多,要知道他可是引入的是一個(gè)虛擬js文件,這表示我們也可以動態(tài)的生成函數(shù)以及代碼邏輯在其中.

例子

舉個(gè)例子,比如可以在生成的代碼中自動導(dǎo)入需要的文件,然后返回一個(gè)函數(shù),通過這個(gè)函數(shù)來使用之前導(dǎo)入的文件,這樣我們就不需要在實(shí)際使用的導(dǎo)入這些文件了,通過返回虛擬文件中導(dǎo)出的函數(shù)我們就可以直接使用這些本來要導(dǎo)入的文件.

import a from 'a-module'
import b from 'b-module'
...
import z from 'z-module'

const modules = {a,b,...,z}

export default useModule(name){
    return modules[name]
}

之前使用 ?

import a from 'a-module'
import b from 'b-module'
...
import z from 'z-module

a()
b()
c()

現(xiàn)在使用 ?

import useModule from 'virtual:xxx'

const a = useModule('a')
const b = useModule('b')
const c = useModule('c')

當(dāng)然這只是一個(gè)簡單的例子，你可以更多的發(fā)揮自己的想象力還是先更多的功能

文檔

我們來回到文檔來看看具體功能是如何實(shí)現(xiàn)的呢？

文檔中給出的例子如下：

export default function myPlugin() {
  const virtualFileId = '@my-virtual-file'  

  return {
    name: 'my-plugin', // 必須的，將會在 warning 和 error 中顯示
    resolveId(id) {
      if (id === virtualFileId) {
        return virtualFileId
      }
    },
    load(id) {
      if (id === virtualFileId) {
        return `export const msg = "from virtual file"`
      }
    }
  }
}

可以看出其中主要又三個(gè)關(guān)鍵點(diǎn):

• virtualFileId : 需要引入的虛擬文件名

• resolveId(id): 判斷是否是需要解析的虛擬文件名

• load(id): 返回對應(yīng)的虛擬引入文件的代碼字符串

可以看出返回的代碼是以字符串的方式返回的,我們可以通過模板拼接或模板轉(zhuǎn)譯的方式來方便我們構(gòu)建需要返回的代碼字符串.

Typescript支持

不過需要注意的是虛擬文件引入返回的是js代碼而不是ts代碼,而且代碼是動態(tài)生成的這也說明在使用過程中我們會遇到在TS中沒有類型支持的情況

那么如果你的代碼結(jié)構(gòu)是確定的可以提前生成對應(yīng)的d.ts定義文件.然后通過 在tsconfig中配置compilerOptions.types加載對應(yīng)的定義文件即可,如果代碼結(jié)構(gòu)是動態(tài)的,那么就需要?jiǎng)討B(tài)生成對應(yīng)的d.ts文件寫入到項(xiàng)目中來實(shí)現(xiàn).

declare module 'virtual:xxx' {
...
}

總結(jié)

可以看出引入虛擬文件是一個(gè)很實(shí)用的功能,它不僅可以讓前端代碼可以與編譯環(huán)境進(jìn)行交互,而且可以動態(tài)的生成代碼來實(shí)現(xiàn)一些以前不是那么方便實(shí)現(xiàn)的功能,而開發(fā)起來具體實(shí)現(xiàn)也很簡單,你準(zhǔn)備在你的插件中使用了么?

感謝各位的閱讀，以上就是“Vite引入虛擬文件的實(shí)現(xiàn)方法”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對Vite引入虛擬文件的實(shí)現(xiàn)方法這一問題有了更深刻的體會，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識點(diǎn)的文章，歡迎關(guān)注！