背景

在新項(xiàng)目升級(jí)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上面的包,那會(huì)是什么?

引入虛擬文件

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

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

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

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

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

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

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

例子

舉個(gè)例子,比如可以在生成的代碼中自動(dòng)導(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', // 必須的，將會(huì)在 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): 返回對(duì)應(yīng)的虛擬引入文件的代碼字符串

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

Typescript支持

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

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

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

總結(jié)

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

到此這篇關(guān)于Vite引入虛擬文件的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Vite引入虛擬文件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論