vue项目 require.context的应用

通常，我们在引入并注册组件时，会选择这样做

这种做法看似没有问题，组件少的时候其实并不会显得麻烦和累赘，但是当组件不断增多，这种写法就显得有点“傻”。

 

我们可以用require.context解决这个问题

require.context(directory, useSubdirectories = true, regExp = /^\.\/.*$/, mode = 'sync');

directory: 要查找的文件路径

useSubdirectories: 是否查找子目录

regExp: 要匹配文件的正则

mode:加载模式，同步/异步

 

 

我们来改造一下上边的例子

// 从@/components/Login目录下加载所有.vue后缀的组件
const files = require.context('@/components/Login', false, /\.vue$/);
const components = {};

// 遍历files对象，构建components键值
files.keys().forEach(key => {
    components[key.replace(/(\.\/|\.vue)/g, '')] = files(key).default
});

export default {
    ...

    components, // ES6语法糖，代表 components: components,

    ...
}

 

除此之外，也常用在vuex中加载module

/**
 * The file enables `@/store/index.js` to import all vuex modules
 * in a one-shot manner. There should not be any reason to edit this file.
 */

const files = require.context('.', false, /\.js$/)
const modules = {}

files.keys().forEach(key => {
  if (key === './index.js') return
  modules[key.replace(/(\.\/|\.js)/g, '')] = files(key).default
})

export default modules