webpack与vite环境下自动引入并注册路由组件

问题

通常我们在开发业务时，一个文件夹下会有多个页面路由组件，每当添加一个页面组件需要手动import该组件进行注册路由，这样重复的工作着实让人烦躁，那么有没有更好的方式自动引入注册呢。

如果是小项目还好，几个页面每次都手动import也不怎么费事

webpack

使用require.context

暂没找到官方文档

1. require.context接收三个参数

• require.context(directory, useSubdirectories, regExp)
  • directory 要检索的目录
  • useSubdirectories 是否检索子文件夹
  • regExp 匹配文件的正则表达式，通常是后缀文件名（.js/.vue）

2. 示例

• 如目录views下有两个vue组件 Aaa.vue和Bbb.vue

  
  views
• 导入
  • require.png
• 输出modules
  • modules

modules输出的信息是一个函数

• 使用Object.keys查看该函数有些什么方法（keys）
  • keys

这里我们需要的是keys

• 执行modules.keys()
  • modules.keys

  此时拿到的是文件路径，可把文件路径作为key值拿到对应的组件

• 遍历keys注册路由
  • routes

routes就是我们要注册的路由信息
组件通过modules[key]获取
toLowerCase是为了给用户看到的页面pathname为小写

vite

使用import.meta，其中import.meta下有两个方法import.meta.glob和import.meta.globEager，这里使用import.meta.glob

import.meta是一个给JavaScript模块暴露特定上下文的元数据属性的对象。它包含了这个模块的信息，比如说这个模块的URL MDN

• import.meta.glob，这里只接收一个参数directory 要检索的目录
  • modules

modules拿到的是一个对象，对象里每个key对应一个函数，对象的每个key也是文件路径

• 从modules中获取keys
  • moduleKeys.png
• 遍历keys注册路由
  • routes

本文完~