vue项目 require.context的应用

蔚落 2022-12-18 14:00 92阅读 0赞

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hSTTI0NTQ_size_16_color_FFFFFF_t_70][]

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

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

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

directory: 要查找的文件路径

useSubdirectories: 是否查找子目录

regExp: 要匹配文件的正则

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hSTTI0NTQ_size_16_color_FFFFFF_t_70 1][]

// 从@/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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hSTTI0NTQ_size_16_color_FFFFFF_t_70 2][]

/**
     * 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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hSTTI0NTQ_size_16_color_FFFFFF_t_70 3][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hSTTI0NTQ_size_16_color_FFFFFF_t_70]: /images/20221122/b5f2b4c9e3e04c2bac38bdffe319835e.png
[require.context]: https://webpack.js.org/guides/dependency-management/#require-context
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hSTTI0NTQ_size_16_color_FFFFFF_t_70 1]: /images/20221122/3ebd43377474489ab4bda52d1231686e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hSTTI0NTQ_size_16_color_FFFFFF_t_70 2]: /images/20221122/95316d3842e244c3b9a2e29997660dce.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hSTTI0NTQ_size_16_color_FFFFFF_t_70 3]: /images/20221122/f653f77dbbf3423284b23a2845f3e6e2.png