vue引入文件夹下所有vue组件

vue引入文件夹下所有vue组件

作者：@ 很菜的小白在分享
时间：2022年11月15日

背景

在日常开发中，我们可能会遇到需要动态加载组件的情况。比如我在一个流程图编辑的项目中就遇到了需要根据不同的节点类型，展示不同的编辑内容，因为需求的特殊性，无法在一个组件内通过条件判断动态显示，所以将所有的类型进行组件的注册，但因为所需的组件比较多，所有就考虑是否可以进行文件夹级别的组件注册。在查阅的相关文档后，终于在webpack文档中发现了它。

require.content

官网中是这样介绍的：

你还可以通过 require.context() 函数来创建自己的 context。

可以给这个函数传入三个参数：一个要搜索的目录，一个标记表示是否还搜索其子目录， 以及一个匹配文件的正则表达式。

Webpack 会在构建中解析代码中的 require.context() 。

什么意思呢？其实就是使用这个API可以为你想要加载的模块文件创建一个上下文(context)，方便你进行一些处理。

require.content使用

// 加载/components/work-editor/文件夹下的所有 .vue 文件，支持目录的递归查找
const context = require.context("@/components/work-editor/", true, /\.vue$/)

通过这行代码就可以为我们指定的文件夹下的所有vue文件创建上下文(context)，它的返回值是一个包含所有上下文的对象集合{context1: Context, context2: Context}。因为我们加载的是.vue的文件，所有创建的context即VueComponent实例。

官网

实际应用

解析获取所有文件集合

// util.js
export const importAll = (r) => {
  let cache = {}
  r.keys().forEach(key => cache[key] = r(key))
  return cache;
}

为所有模块创建Context

// index.vue
import { importAll } from "@/util";

// 创建Context
const allFile = importAll(
  require.context("@/components/work-editor/", true, /\.vue$/)
);

注册导入的所有模块组件

// index.vue
import { importAll } from "@/util";

// 创建Context
const allFile = importAll(
  require.context("@/components/work-editor/", true, /\.vue$/)
);

// 生成待待注册组件集合
const componentsAll = {};
for (const key in allFile) {
  const element = allFile[key].default;
  componentsAll[element.name] = element;
}

// 注册组件
export default {
  components: { ...componentsAll },
}

完结

到这里就结束了，如果对各位有帮助，记得留下点痕迹，让我知道你来过。
如果有更好的方案，欢迎评论区讨论，共同进步，2022 加油！！