JS：使用require.context引入多个JSON文件

简介

同类型的文件很多，在vue项目中一个一个的import引入是不科学的操作，是十分繁琐且容易出错的，所以就需要一个统一的方法进行批量引入，就需要使用 Webpack 中的 require.context() 方法。

1.语法：

// require.context函数接收三个参数：
// 要搜索的文件夹目录，是否还应该搜索它的子目录，匹配文件的正则表达式
require.context(directory, useSubdirectories = false, regExp = /^.//);

2.示例

// 一个test文件夹下面（-----不包含 子目录----），能被require请求到，所有文件名以 `.test.js` 结尾的文件形成的上下文（模块）。
require.context("./test", false, /\.test\.js$/);

// 一个父级文件夹下面（-----包含 子目录-----），所有文件名以 `.stories.js` 结尾的文件形成的上下文（模块）。
require.context("../", true, /\.stories\.js$/);

具体实现

实例：引入N个json数据

1.目录

2.代码

const moduleFiles = require.context('./modules', false, /\.json$/)
const moduleData = moduleFiles.keys().map(obj => {
     
  return moduleFiles(obj)
}, {
     })

export default moduleData

3.注意

不是直接export default 的 moduleFiles ，是需要对引入的moduleFiles 进行处理，并且return的是moduleFiles(obj)。

（1）此处的 moduleFiles 是一个函数值，对其直接遍历输出的是文件路径，是不能满足需求的，如下：

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200824103622737.png#pic_center

（2）对 moduleFiles.keys() 进行遍历，return moduleFiles(obj)，如此，才是想要的json文件中的数据

最后

觉得有用的朋友请用你的金手指点一下赞，或者评论留言一起探讨技术！