在平時開發(fā)中，大家肯定遇到一些你不想做但是又必須做的事，比如路由配置文件、ajax請求封裝使用等。
比如在開發(fā)中，隨著模塊增多，每增加一個模塊你就需要去router的配置文件下對路由進行配置
如下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)
                            }
                        ]
                    },

還有對異步請求的封裝也是一個道理，對于我個人而言，我喜歡把異步請求統(tǒng)一引入再統(tǒng)一向外暴露使用，隨著模塊的增多，也會是沒新增一個模塊我就要去配置的地方引入一遍暴露一遍。

import CommonService from './modules/common';
import LoginService from './modules/login'

export default {
  CommonService,
  LoginService
}

痛點：每當新增模塊的時候我們都要去配置文件里面做一次重復操作，對于不怕麻煩的人來說還好，對于想偷懶的我來說就不那么開心了。

那么我們有什么好辦法呢？

有的有的，我們可以用一種規(guī)則來統(tǒng)一引入某些文件，然后動態(tài)生成我們想要的配置文件，這樣后面再增加模塊的時候就不需要我們自己動手了，然后根據(jù)自己定的規(guī)則在進行使用就完事了！

require.context

require.context(directory, useSubdirectories, regExp)

• directory: 要查找的文件路徑
• useSubdirectories: 是否查找子目錄
• regExp: 要匹配文件的正則
  對于Vue2.0的項目，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的項目，由于打包工具的變化，我們無法使用webpack提供的require.context了，Vite 支持使用特殊的 import.meta.glob 函數(shù)從文件系統(tǒng)導入多個模塊，可以參考【官網(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)
  })
}

匹配到的文件默認是懶加載的，通過動態(tài)導入實現(xiàn)，并會在構(gòu)建時分離為獨立的 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
}

• 這只是一個 Vite 獨有的功能而不是一個 Web 或 ES 標準
  -該 Glob 模式會被當成導入標識符：必須是相對路徑（以 ./ 開頭）或絕對路徑（以 / 開頭，相對于項目根目錄解析）。