require.context用法以及在Vue中的使用实例

require.context的用法

require.context(directory, useSubdirectories, regExp)

其中

• directory {String} -读取文件的路径
• useSubdirectories {Boolean} -是否遍历文件的子目录
• regExp {RegExp} -匹配文件的正则

// modules 目录下 不用遍历子目录后缀名为js的文件
const require_module = require.context('./modules', false, /.js$/)
console.log(require_module)

从打印的返回值分析

返回

var map = {
	"./a.js": "./src/store/modules/a.js",
         "./b.js": "./src/store/modules/b.js",
};
function webpackContext(req) {
	var id = webpackContextResolve(req);
	return __webpack_require__(id);
}
function webpackContextResolve(req) {
	if(!__webpack_require__.o(map, req)) {
		var e = new Error("Cannot find module '" + req + "'");
		e.code = 'MODULE_NOT_FOUND';
		throw e;
	}
	return map[req];
}
webpackContext.keys = function webpackContextKeys() {
	return Object.keys(map);
};
webpackContext.resolve = webpackContextResolve;
module.exports = webpackContext;
webpackContext.id = "./src/store/modules sync .js$";

• keys: 返回匹配成功模块的名字组成的数组
• resolve: 接受一个参数request，request为test文件夹下面匹配文件的相对路径，返回这个匹配文件相对于整个工程的相对路径
• id: 执行环境的id，返回的是一个字符串，主要用在module.hot.accept，应该是热加载 从上述返回值可以分析出如何实现动态import

require_module.keys().forEach(file_name => {
    modules[file_name.slice(2, -3)] = require_module(file_name).default
})

在Vuex的使用

动态引入modules，不必每创建一个module就要在index.js 中import 引入 实例代码

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const modules = {}
const require_module = require.context('./modules', false, /.js$/)
console.log(require_module)
require_module.keys().forEach(file_name => {
    modules[file_name.slice(2, -3)] = require_module(file_name).default
})
// console.log(modules)
export default new Vuex.Store({
    modules: modules,
    strict: process.env.NODE_ENV !== 'production'
})