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

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

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

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

 1 import Vue from 'vue';
 2 import Vuex from 'vuex';
 3 
 4 Vue.use(Vuex);
 5 
 6 import user from './modules/user';
 7 import info from './modules/info';
 8 //此处省略N多文件。。。。。
 9 
10 export default new Vuex.Store({
11     modules: {
12         user,
13         info
14     },
15 });

　　经过上述引入虽然能够达成效果可是若是有不少文件呢？难道也要一个一个引入？那么如何动态加载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项目当中呢？

 1 import Vue from 'vue';
 2 import Vuex from 'vuex';
 3 import camelcase from 'camelcase’;    //驼峰命名的一个npm包
 4 Vue.use(Vuex);
 5 
 6 const context = require.context('./modules', false, /\.js$/);
 7     //获取moudules文件下全部js文件；
 8 const moduleStores = {};
 9 
10 context.keys().forEach(key => {
11     // context.keys()    返回匹配成功模块的名字组成的数组
12     const fileName = key.slice(2, -3);
13     //截取名字
14     const fileNameInCamelCase = camelcase(fileName);
15     //camelcase 是一个驼峰命名包；
16     const fileModule = context(key).default;
17     //经过 context(key)导出文件内容。在文件中时经过 export.default 导出的，因此后边加.default
18     moduleStores[fileNameInCamelCase] = {
19         ...fileModule,
20         namespaced: true,    //文件中有写能够省略；不过这样写能够不用给每一个文件写入；这个属性不知道本身去查文档；
21     };
22 });
23 
24 export default new Vuex.Store({
25     modules: {
26         ...moduleStores,
27     },
28 });

　　经过以上方法就能够动态的导入modules文件夹中的全部js文件，这样就方便管理了，也不用一个个引入；

　　若是你某个文件不想引入能够在forEach中，经过判断来解决：

 1 context.keys().forEach(key => {
 2   const fileName = key.slice(2, -3);
 3   const fileNameInCamelCase = camelcase(fileName);
 4   const fileModule = context(key).default;
 5 
 6   if (fileName === 'user') {
 7     return;
 8   }
 9   moduleStores[fileNameInCamelCase] = {
10     ...fileModule,
11     namespaced: true,
12   };
13 });

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