序言

在我們創建路由的時候，會發現如果所有的路由都在一個文件內，那麼當項目路由多的時候，就會出現路由難找，路由跟路由不在一塊等情況出現（沒維護好）。
所以，為了避免這種情況，我們可以使用模塊化這種思想來解決問題。
那麼，問題就來了，當模塊多的時候，一個個的導入就很浪費時間，需要重複 引入 - 賦值 這一過程，所以，我們是不是能讓程序來幫我們做這一步驟呢，那麼我們豈不是可以愉快玩耍了。

一、webpack

require.context

按照官網解釋，該方法可以在構建時在代碼中解析要搜索的目錄。通俗的來説，就根據你給出的規則，然後找到符合條件的文件，然後在構建的時候自動生成我們之前需要手動導入的那些代碼。

/**
 * 可以看出該方法接受4個參數
 * @param {string} directory 需要搜索的目錄
 * @param {boolean} useSubdirectories 是否搜索子目錄，默認true
 * @param {regExp} regExp 文件匹配規則 默認/^\.\/.*$/
 * @param {string} mode 模式，默認sync
 * @return {function} function(resolve, keys, id)
 */
require.context(
  directory,
  (useSubdirectories = true),
  (regExp = /^\.\/.*$/),
  (mode = 'sync')
)

/**
 * 該方法返回一個函數，具有 3 個屬性：resolve、keys、id
 * resolve{function}，返回解析請求的模塊 ID
 * keys{function}，返回正則匹配的文件名稱數組
 * id{string}，上下文模塊的模塊 ID
 */

// 例子，搜索當前目錄下的modules，不需要搜索modules子目錄，匹配規則是所有的js文件
require.context('./modules', false, /\.js$/);

/**
 * 完整例子，自動導入路由模塊
 * 目錄
 * --> modules
 * ---- home.js
 * ---- system.js
 */
(r => r.keys().map(key => r(key).default))(require.context('./modules', false, /\.js$/))

// console
[{
  path: '/home'
  name: 'home',
  component: () => import('@/views/home'),
}, {
  path: '/system'
  name: 'system',
  component: () => import('@/views/system'),
}]

二、vite

import.meta.glob

按照官網解釋，該方法是一個懶加載方法，通過動態導入實現，與 import.meta.globEager 的區別只是一個同步，一個異步，視情況使用。

const modules = import.meta.globEager('./modules/*.ts');
let routes = [];

for (const key in modules) {
  modules[key]().then((mod) => {
    routes.push(mod.default);
  })
}

// console
[{
  path: '/home'
  name: 'home',
  component: () => import('@/views/home/index.vue'),
}, {
  path: '/system'
  name: 'system',
  component: () => import('@/views/system/index.vue'),
}]

import.meta.globEager

按照官網解釋，該方法是一個同步方法，可直接引入匹配的模塊

const modules = import.meta.globEager('./modules/*.ts');
let routes = [];

for (const item of Object.values(modules)) {
  routes.push(item.default);
}

// console
[{
  path: '/home'
  name: 'home',
  component: () => import('@/views/home/index.vue'),
}, {
  path: '/system'
  name: 'system',
  component: () => import('@/views/system/index.vue'),
}]

參考

webpack
vite