在平時(shí)開發(fā)中，大家肯定遇到一些你不想做但是又必須做的事躬柬，比如路由配置文件昧旨、ajax請求封裝使用等拾给。
比如在開發(fā)中祥得，隨著模塊增多，每增加一個(gè)模塊你就需要去router的配置文件下對路由進(jìn)行配置
如下router配置文件
{
path: "test",
name: "test",
meta: {
title: "test管理"
},
component: resolve =>
require([
"@/components/pages/test"
], resolve),
children: [
{
path: "list",
meta: {
title: "test列表"
},
name: "test_list",
component: resolve =>
require([
"@/components/pages/app/test/list"
], resolve)
},
{
path: "add/:gid",
meta: {
title: "新增test"
},
name: "test_add",
component: resolve =>
require([
"@/components/pages/app/test/add"
], resolve)
}
]
},
還有對異步請求的封裝也是一個(gè)道理蒋得，對于我個(gè)人而言级及，我喜歡把異步請求統(tǒng)一引入再統(tǒng)一向外暴露使用，隨著模塊的增多额衙，也會是沒新增一個(gè)模塊我就要去配置的地方引入一遍暴露一遍饮焦。
import CommonService from './modules/common';
import LoginService from './modules/login'
export default {
CommonService,
LoginService
}
痛點(diǎn)：每當(dāng)新增模塊的時(shí)候我們都要去配置文件里面做一次重復(fù)操作，對于不怕麻煩的人來說還好窍侧，對于想偷懶的我來說就不那么開心了县踢。
那么我們有什么好辦法呢？
有的有的伟件，我們可以用一種規(guī)則來統(tǒng)一引入某些文件硼啤，然后動態(tài)生成我們想要的配置文件，這樣后面再增加模塊的時(shí)候就不需要我們自己動手了斧账，然后根據(jù)自己定的規(guī)則在進(jìn)行使用就完事了丙曙！
require.context
require.context(directory, useSubdirectories, regExp)
- directory: 要查找的文件路徑
- useSubdirectories: 是否查找子目錄
- regExp: 要匹配文件的正則
對于Vue2.0的項(xiàng)目，webpack為我們提供了require.context
/* 自定義組件 */
const files = require.context('../components', true, /index\.js$/)
const modules: any = {}
files.keys().forEach(key => {
modules[key.replace(/(\.\/|\.js)/g, '')] = files(key).default
})
// 自定義組件注冊
export function customRegister() {
Object.entries(modules).forEach((arr: any) => {
Vue.use(arr[1]);
})
}
image.png
import.meta.glob& import.meta.globEager
- import.meta.glob
對于vue3.0的項(xiàng)目其骄，由于打包工具的變化，我們無法使用webpack提供的require.context了扯旷，Vite 支持使用特殊的 import.meta.glob 函數(shù)從文件系統(tǒng)導(dǎo)入多個(gè)模塊拯爽，可以參考【官網(wǎng)文檔】（https://cn.vitejs.dev/guide/features.html#glob-import）
var files = import.meta.glob("./modules/*.ts");
const files = {
'./modules/foo.js': () => import('./modules/foo.js'),
'./modules/bar.js': () => import('./modules/bar.js')
}
for (const path in modules) {
modules[path]().then((mod) => {
console.log(path, mod)
})
}
匹配到的文件默認(rèn)是懶加載的，通過動態(tài)導(dǎo)入實(shí)現(xiàn)钧忽，并會在構(gòu)建時(shí)分離為獨(dú)立的 chunk
- import.meta.globEager
如果你傾向于直接引入所有的模塊（例如依賴于這些模塊中的副作用首先被應(yīng)用）毯炮，你可以使用 import.meta.globEager
const modules = import.meta.globEager('./modules/*.js')
import * as __glob__0_0 from './modules/foo.js'
import * as __glob__0_1 from './modules/bar.js'
const modules = {
'./modules/foo.js': __glob__0_0,
'./modules/bar.js': __glob__0_1
}
- 這只是一個(gè) Vite 獨(dú)有的功能而不是一個(gè) Web 或 ES 標(biāo)準(zhǔn)
-該 Glob 模式會被當(dāng)成導(dǎo)入標(biāo)識符：必須是相對路徑（以 ./ 開頭）或絕對路徑（以 / 開頭，相對于項(xiàng)目根目錄解析）耸黑。
