当前位置:网站首页>require.context
require.context
2022-07-03 01:56:00 【[email protected]】
通过 require.context() 函数来创建自己的 context。它接收三个参数:
const requireComponent = require.context(
// 其组件目录的相对路径,文件路径
'./components',
// 是否查询其子目录
false,
// 匹配基础组件文件名的正则表达式,匹配某些文件
/Base[A-Z]\w+\.(vue|js)$/
)
导出的方法有 3 个属性: resolve, keys, id
resolve 是一个函数,它返回请求被解析后得到的模块 id。
keys 也是一个函数,它返回一个数组,由所有可能被上下文模块处理的请求组成。
id 是上下文模块里面所包含的模块 id. 它可能在你使用 module.hot.accept 的时候被用到
通过它我们可以批量导出一些资源比如图片,组件,对象等。比如Vue官方提供的注册组件的案例:
import Vue from 'vue'
import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'
const requireComponent = require.context(
// 其组件目录的相对路径
'./components',
// 是否查询其子目录
false,
// 匹配基础组件文件名的正则表达式
/Base[A-Z]\w+\.(vue|js)$/
)
requireComponent.keys().forEach(fileName => {
// 获取组件配置
const componentConfig = requireComponent(fileName)
// 获取组件的 PascalCase 命名
const componentName = upperFirst(
camelCase(
// 获取和目录深度无关的文件名
fileName
.split('/')
.pop()
.replace(/\.\w+$/, '')
)
)
// 全局注册组件
Vue.component(
componentName,
// 如果这个组件选项是通过 `export default` 导出的,
// 那么就会优先使用 `.default`,
// 否则回退到使用模块的根。
componentConfig.default || componentConfig
)
})
注:这里理解的不够深入,只是在项目中看到别人这样写了先记录一下,等到后面回来补充。
版权声明
本文为[[email protected]]所创,转载请带上原文链接,感谢
https://blog.csdn.net/qq_43259860/article/details/125559366
边栏推荐
- Network security - scan
- PS remove watermark details
- 技术大佬准备就绪,话题C位由你决定
- Performance test | script template sorting, tool sorting and result analysis
- 疫情当头,作为Leader如何进行团队的管理?| 社区征文
- 力扣(LeetCode)183. 从不订购的客户(2022.07.02)
- Distributed transaction solution
- Y54. Chapter III kubernetes from introduction to mastery -- ingress (27)
- Network security - password cracking
- [shutter] shutter debugging (debugging fallback function | debug method of viewing variables in debugging | console information)
猜你喜欢
Y54. Chapter III kubernetes from introduction to mastery -- ingress (27)
【Camera专题】Camera dtsi 完全解析
【Camera专题】OTP数据如何保存在自定义节点中
The testing process that software testers should know
[shutter] pull the navigation bar sideways (drawer component | pageview component)
【Camera专题】手把手撸一份驱动 到 点亮Camera
小程序開發的部分功能
树形结构数据的处理
Visual yolov5 format data set (labelme JSON file)
Ni visa fails after LabVIEW installs the third-party visa software
随机推荐
Technology sharing | Frida's powerful ability to realize hook functions
Cfdiv2 fixed point guessing- (interval answer two points)
详细些介绍如何通过MQTT协议和华为云物联网进行通信
8 free, HD, copyright free video material download websites are recommended
Analyzing several common string library functions in C language
Comment communiquer avec Huawei Cloud IOT via le Protocole mqtt
Network security - cracking system passwords
[Yu Yue education] reference materials of chemical experiment safety knowledge of University of science and technology of China
Recommendation letter of "listing situation" -- courage is the most valuable
DQL basic operation
Asian Games countdown! AI target detection helps host the Asian Games!
y54.第三章 Kubernetes从入门到精通 -- ingress(二七)
MySQL学习03
How do browsers render pages?
深度(穿透)选择器 ::v-deep/deep/及 > > >
Detailed introduction to the usage of Nacos configuration center
Socket编程
Groovy, "try with resources" construction alternative
使用Go语言实现try{}catch{}finally
What are the key points often asked in the redis interview