require.context()的用法

好喝的西北风

已于 2023-08-29 11:19:39 修改

阅读量2.4k

点赞数 4

文章标签：前端 vue.js

于 2021-12-15 15:08:41 首次发布

本文链接：https://blog.csdn.net/weixin_43340372/article/details/121952845

版权

一般用于加载某个目录下的多个文件，如：

const modulesFiles = require.context("./modules", true, /\.js$/)

require.context()接收三个参数，第一个参数是要加载的文件目录地址，第二个参数是true或false，表示是否需要加载子目录，第三个参数是个正则表达式，表示要加载哪些文件，上面代码表示要加载components目录下的.js文件。

应用：

加载store中的modules为例：

const modules = require.context('./modules', true, /\.js$/).keys().reduce((modules, modulePath) => {
    // set './app.js' => 'app'
    const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1');
    const value = require.context('./modules', true, /\.js$/)(modulePath);
    modules[moduleName] = value.default;
    return modules;
}, {});
 
const store = new Vuex.Store({
    modules
});

通过reduce方法循环，将每个js中export default出的对象放在modules中并return，最后将modules丢到Vuex.Strore中。

项目目录：