require.context的用法详解
前言
require.contextt()官方文档
如果你有非常多的组件,你也可以利用构建工具的功能,比如 Vite 的 glob 导入或者 webpack 的 require.context 来从一个文件夹加载所有的组件。
require.context(directory,useSubdirectories,regExp)
directory:表示检索的目录
useSubdirectories:表示是否检索子文件夹
regExp:匹配文件的正则表达式,一般是文件名
例如 require.context(‘./test’, false, /.test.js$/);
实例
在vuex中将各个vuex文件在index中加载
// 解决vuex命名冲突,为所有的vuex模块添加namespaced: true
const modules = {
}
const files = require.context('./modules', false, /\.ts$/)
files.keys().forEach((key) => {
modules[key.replace(/(modules|\/|\.|ts)/g, '')] = {
...files(key).default,
namespaced: true
}
})
const store = createStore({
modules })
export default store