require.context的用法

最新推荐文章于 2025-09-16 17:20:21 发布

原创最新推荐文章于 2025-09-16 17:20:21 发布 · 496 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript

Vue 专栏收录该内容

6 篇文章

订阅专栏

这篇博客介绍了如何利用Webpack的require.context API来批量注册Vue组件。通过指定文件夹路径、是否搜索子目录及文件类型正则，可以自动化加载指定目录下的所有Vue文件。在示例中，展示了如何在全局注册'./components'目录下的a.vue和b.vue组件，通过遍历files.keys()并调用files(k)获取组件实例，然后将其注册到Vue中。

require.context是webpack提供的一个api。通常用于批量注册组件。

require.context("文件夹路径", "布尔值，表示是否查询子目录", "正则表达式，用于过滤文件")

例如，假设当前目录下有个叫module的文件夹，里面放置了a.vue和b.vue两个文件，现在想要全局注册这两个组件：

const files = require.context('./components', true, /\.vue$/i) 
// 筛选出components文件夹下所有的vue文件，注意此时files是个函数，
// 包含3个静态属性：keys(函数，可以获取文件路径)、
// resolve(函数，可以传入keys返回的文件路径获取被解析后得到的模块 id，通常也是文件路径)
// id(context module 的模块 id. 它可能在你使用 module.hot.accept 时会用到)
// files函数可以传入keys返回的文件路径得到module对象，在module对象的default属性中保存了组件实例
files.keys().forEach(k => {
  const module = files(k)
  const comInstance = module.default || module
  const comName = comInstance.name || k.replace(/\.\/(.*)\.vue$/i, '$1') // 查看组件实例是否给定了name，没有的话则使用文件名
  Vue.component(comName, comInstance)
})