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/