前端require.context()的使用

require.context()

require.context(directory,useSubdirectories,regExp),接收三个参数

• directory：说明需要检索的目录
• useSubdirectories：是否检索子目录
• regExp: 匹配文件的正则表达式,一般是文件名

require.context返回一个require 函数，函数有三个属性：resolve 、keys、id。

• resolve: 是一个函数，他返回的是被解析模块的id ，接受一个参数request。
• keys: 也是一个函数，他返回的是一个数组，该数组是由所有可能被上下文模块解析的请求对象组成。
• id：上下文模块的id

应用的场景

1.如果页面需要导入多个组件时，一般的写法：

import aaa from '@/components/example/aaa'
import bbb from '@/components/example/bbb'
import ccc from '@/components/example/ccc'
import ddd from '@/components/example/ddd'
components:{
aaa,
bbb,
ccc,
ddd,
}

但是使用require.context()时的写法就简洁了许多

const path = require('path')
const files = require.context('@/components/example', false, /\.vue$/)
const modules = {}
files.keys().forEach(key => {
   const name = path.basename(key, '.vue')
    // 提取出用 ‘/' 隔开的path的最后一部分,path.basename(p, [ext])。 p要处理的path,ext要过滤的字符
   modules[name] = files(key).default || files(key)
})
components:modules

2.在store下创建一个modules文件夹，里面放置的是各个模块的state,mutaions…，可以使用它直接进行全部引入，模块名就是文件的名称，方便后续直接添加：

下面这段代码放在store下的index.js里面

const files = require.context("./modules", false, /\.js$/);
const modules = {};
files.keys().forEach((key) => {
   modules[key.replace(/(\.\/|\.js)/g, "")] = files(key).default;
});
export default new Vuex.Store({
state:{},
mutaions:{},
modules  //这个modules就是上面引入之后所有的模块
})