vue项目 require.context的应用

最新推荐文章于 2022-10-25 10:22:23 发布

原创最新推荐文章于 2022-10-25 10:22:23 发布 · 784 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

vue

当前文章被收录于：

vue

12 篇文章 1 人学习

订阅专栏查看详情

ES6

当前文章被收录于：

ES6

7 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文介绍了一种利用require.context方法批量注册Vue组件及加载Vuex模块的方法，简化了开发过程中的重复劳动，提高了代码的可维护性和扩展性。

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

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

我们可以用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