require.context实现目录读取,动态引入

使用场景

在当前的前端开发过程中,大部分都是单页面模块化开发,那么当模块达到一定规模的时候,手动添加导出引用显得有点麻烦,那么我们可以使用webpack的require.context来实现我们的动态引入,只需要按照规定的格式书写代码即可

参数说明

require.context函数接受三个参数:

1 directory {String} -读取文件的路径

2 useSubdirectories {Boolean} -是否遍历文件的子目录

3 regExp {RegExp} -匹配文件的正则

举个栗子:

const files = require.context("./modules", false, /\.js$/)

这行代码的意思就是:读取modules下面一级目录文件且是js文件

返回说明

require.context函数执行后返回的是一个函数,具体如下:

1 resolve {Function} -接受一个参数request,request为test文件夹下面匹配文件的相对路径, 返回这个匹配文件相对于整个工程的相对路径

2 keys {Function} -返回匹配成功模块的名字组成的数组

3 id {String} -执行环境的id,返回的是一个字符串,主要用在module.hot.accept,应该是热加载?

这三个都是作为函数的属性(注意是作为函数的属性,函数也是对象,有对应的属性)

举个栗子:

const files = require.context("./modules", false, /\.js$/);
let modules = {
    state: {},
    mutations: {},
  actions: {},
  getters: {}
};

files.keys().forEach((key) => {
  Object.assign(modules.state, files(key)["state"]);
  Object.assign(modules.mutations, files(key)["mutations"]);
  Object.assign(modules.actions, files(key)["actions"]);
  Object.assign(modules.getters, files(key)["getters"]);
});
const store = new Vuex.Store(modules);
export default store;

这一段代码做了几件事情:

1 使用 require.context 拿到modules下面所有的js文件(没有遍历子目录)
2 对得到的结果files进行遍历,获取每个文件对应的导出数据
3 最后用得到的结果实例化一个vux导出

这个方法是直接将每个文件中的内容进行组装得到最后的一个新的store数据结构;

总结

通过以上的参数以及举例使用,对于我们的模块化开发是有一定的帮助的.再也不用因为模块太多,而手动去import烦恼了.当然在项目还是有挺多地方可以使用到的;

1 状态管理vuex

2 路由注册

3 svg的优雅使用,有了require.context,相当每个项目都自带了一个iconfont的库了,只需要不断的往里面添加icon就可以了