简单了解-require.context

阅读目录

• 1.概念
• 2.参数及返回值介绍
• 3.用法
• 参考链接：

回到顶部

1.概念

是什么：是一个webpack的api，通过执行require.context函数获取一个特定的上下文，主要用来实现自动化导入模块。

作用：将某个文件夹的内容全部导入进来。

应用场景：

1. 用于全局组件的导入
2. 引入vuex的module
3. svg图片的引入
4. 其他需要同一文件夹多个导入的场景

回到顶部

2.参数及返回值介绍

require.context( directory, useSubdirectories, regExp, mode='sync' )

参数介绍：

• directory:表示检索的目录
• useSubdirectories：表示是否检索子文件夹
• regExp:匹配文件的正则表达式,一般是文件名
• mode:加载模式，同步/异步

例如 require.context(“@/views/components”,false,/.vue$/)

返回值介绍：

• resolve() :它返回请求被解析后得到的模块 id
• keys(): 返回当前所有搜索到的文件的数组
• id: 上下文模块里面所包含的模块 id

回到顶部

3.用法

3.1在组件内引入多个组件

const path = require("path")
const files = require.context("@/views/00-99/requireContext/components", false, /\.vue$/)
const modules = {}
files.keys().forEach((key) => {
  const name = path.basename(key, ".vue")
  modules[name] = files(key).default || files(key)
})
console.log(modules)
export default {
  components: modules,
}

3.2引入项目中所有的svg

const requireContext = require.context('./svg', false, /\.svg/)
const requireAll = context => context.keys().map(context)
requireAll(requireContext)

回到顶部

参考链接：

require.context()的用法详解_白嫖leader的博客-CSDN博客