自动模块化工具函数封装

1、背景

router、api、store等实现模块化时，需要依次引入、命名并注册（如图所示），不但容易造成代码臃肿，而且还严重影响了开发效率。本文通过封装一个自动模块化函数，实现模块需要模块化的文件的自动引入以及注册，可以极大的提升开发效率。

2、封装函数

// 示例
// const files = require.context('./apis', false, /\.js$/); // require(路径，是否递归，正则)
// initModules(files); 

/**
 * @description 文件自动导入 
 * @param {*} req 文件 
 * @param {*} type 
 * @returns 
 */
export function initModules(req, type = 'js') {
   
  // 模块名称列表
  const fileNames = req
    .keys()
    .map((item) => item.split('./')[1])
    .map((item) => item.split(`.${
     type}`)[0]);
  // 模块文件列表
  const files = req.keys().map(req);
  // 添加模块
  const modules = {
   };
  fileNames.forEach((item, index) => {
   
    modules[item] = files[index].default;
  });
  return modules;
}

3、使用

（确保moudules中的每个文件抛出的都仅有一个对象），如图所示

export default {
   
	
}

1、store中使用

其中modules代表如下含义（router 和api中同理）

import auth from './modules/auth.js'
import config from './modules/config.js'
// xxx
modules: {
   
	auth: auth,
	config: config,
	// xxx
},

2、 route中使用

![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/987490b7adcc4449b6bea70bfdc2edbf.png

3、api中使用