随着项目的复杂,文件结构越来越多,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/