vuex前端工程化之动态导入文件--require.context( )

　　　　随着项目的复杂，文件结构越来越多，Store中modules中的文件也越来越多，如果一个一个加载是不是很麻烦呢？

先看一个项目中store项目结构：

　　过去都是通过import分别引入文件：

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

import user from './modules/user';
import info from './modules/info';
//此处省略N多文件。。。。。

export default new Vuex.Store({
    modules: {
        user,
        info
    },
});

　　通过上述引入虽然可以达成效果但是如果有很多文件呢？难道也要一个一个引入？那么如何动态加载modules文件下的所有JS文件呢？

　　那么这里就会用到webpack文档中的require.context( ) ，来实现前端工程化；

 　　　require.context( )语法如下：

    require.context(directory, useSubdirectories = false, regExp = /^.//);

　　　　示例:

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

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

 　　那么我们怎么把它应用到Vue项目当中呢？

import Vue from 'vue';
import Vuex from 'vuex';
import camelcase from 'camelcase’;    //驼峰命名的一个npm包
Vue.use(Vuex);

const context = require.context('./modules', false, /.js$/);
    //获取moudules文件下所有js文件；
const moduleStores = {};

context.keys().forEach(key => {
    // context.keys()    返回匹配成功模块的名字组成的数组
    const fileName = key.slice(2, -3);
    //截取名字
    const fileNameInCamelCase = camelcase(fileName);
    //camelcase 是一个驼峰命名包；
    const fileModule = context(key).default;
    //通过 context(key)导出文件内容。在文件中时通过 export.default 导出的，所以后边加.default
    moduleStores[fileNameInCamelCase] = {
        ...fileModule,
        namespaced: true,    //文件中有写可以省略；不过这样写可以不用给每个文件写入；这个属性不知道自己去查文档；
    };
});

export default new Vuex.Store({
    modules: {
        ...moduleStores,
    },
});

　　通过以上方法就可以动态的导入modules文件夹中的所有js文件，这样就方便管理了，也不用一个个引入；

　　如果你某个文件不想引入可以在forEach中，通过判断来解决：

context.keys().forEach(key => {
  const fileName = key.slice(2, -3);
  const fileNameInCamelCase = camelcase(fileName);
  const fileModule = context(key).default;

  if (fileName === 'user') {
 7     return;
 8   }
  moduleStores[fileNameInCamelCase] = {
    ...fileModule,
    namespaced: true,
  };
});

　　
           管理依赖-webpack中文档(2.2)-更多详细内容可查 ：  https://www.html.cn/doc/webpack2/guides/dependency-management/