問題
通常我們在開發(fā)業(yè)務(wù)時，一個文件夾下會有多個頁面路由組件，每當(dāng)添加一個頁面組件需要手動import該組件進(jìn)行注冊路由，這樣重復(fù)的工作著實(shí)讓人煩躁，那么有沒有更好的方式自動引入注冊呢。
如果是小項目還好，幾個頁面每次都手動import也不怎么費(fèi)事
webpack
使用require.context
暫沒找到官方文檔
- require.context接收三個參數(shù)
- require.context(directory, useSubdirectories, regExp)
- directory 要檢索的目錄
- useSubdirectories 是否檢索子文件夾
- regExp 匹配文件的正則表達(dá)式，通常是后綴文件名（.js/.vue）
- 示例
-
如目錄views下有兩個vue組件 Aaa.vue和Bbb.vue
views - 導(dǎo)入
- require.png
- 輸出modules
- modules
modules輸出的信息是一個函數(shù)
- 使用Object.keys查看該函數(shù)有些什么方法（keys）
- keys
這里我們需要的是keys
- 執(zhí)行modules.keys()
- modules.keys
此時拿到的是文件路徑，可把文件路徑作為key值拿到對應(yīng)的組件
- 遍歷keys注冊路由
- routes
routes就是我們要注冊的路由信息
組件通過modules[key]獲取
toLowerCase是為了給用戶看到的頁面pathname為小寫
vite
使用import.meta，其中import.meta下有兩個方法import.meta.glob和import.meta.globEager，這里使用import.meta.glob
import.meta是一個給JavaScript模塊暴露特定上下文的元數(shù)據(jù)屬性的對象。它包含了這個模塊的信息，比如說這個模塊的URL MDN
- import.meta.glob，這里只接收一個參數(shù)directory 要檢索的目錄
- modules
modules拿到的是一個對象，對象里每個key對應(yīng)一個函數(shù)，對象的每個key也是文件路徑
- 從modules中獲取keys
- moduleKeys.png
- 遍歷keys注冊路由
- routes
本文完~
