vue-批量导入文件篇（一）

序言

在我们创建路由的时候，会发现如果所有的路由都在一个文件内，那么当项目路由多的时候，就会出现路由难找，路由跟路由不在一块等情况出现（没维护好）。
所以，为了避免这种情况，我们可以使用模块化这种思想来解决问题。
那么，问题就来了，当模块多的时候，一个个的导入就很浪费时间，需要重复 引入 - 赋值 这一过程，所以，我们是不是能让程序来帮我们做这一步骤呢，那么我们岂不是可以愉快玩耍了。

---

一、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