当前位置:网站首页>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
边栏推荐
- [camera special topic] Hal layer - brief analysis of addchannel and startchannel
- 力扣(LeetCode)183. 从不订购的客户(2022.07.02)
- What are the differences between software testers with a monthly salary of 7K and 25K? Leaders look up to you when they master it
- Asian Games countdown! AI target detection helps host the Asian Games!
- Swift开发学习
- Bottleneck period must see: how can testers who have worked for 3-5 years avoid detours and break through smoothly
- Leetcode (540) -- a single element in an ordered array
- 机器学习笔记(持续更新中。。。)
- Network security - DNS spoofing and phishing websites
- Certaines fonctionnalités du développement d'applets
猜你喜欢
ByteDance data Lake integration practice based on Hudi
PS remove watermark details
Redis:Redis的简单使用
Depth (penetration) selector:: v-deep/deep/ and > > >
Rockchip3399 start auto load driver
Performance test | script template sorting, tool sorting and result analysis
y54.第三章 Kubernetes从入门到精通 -- ingress(二七)
[fluent] fluent debugging (debug debugging window | viewing mobile phone log information | setting normal breakpoints | setting expression breakpoints)
Redis: simple use of redis
Custom components, using NPM packages, global data sharing, subcontracting
随机推荐
The testing process that software testers should know
[camera topic] turn a drive to light up the camera
Network security - password cracking
[shutter] top navigation bar implementation (scaffold | defaulttabcontroller | tabbar | tab | tabbarview)
What are the key points often asked in the redis interview
Learn BeanShell before you dare to say you know JMeter
Technology sharing | Frida's powerful ability to realize hook functions
Network security OpenVAS
2022 financial product revenue ranking
小程序开发黑马购物商城中遇到的问题
ByteDance data Lake integration practice based on Hudi
Internal connection query and external connection
Distributed transaction solution
单词单词单词
[Yu Yue education] Jiujiang University material analysis and testing technology reference
Su Shimin: 25 principles of work and life
详细些介绍如何通过MQTT协议和华为云物联网进行通信
Machine learning notes (constantly updating...)
Swift development learning
[shutter] hero animation (hero realizes radial animation | hero component createrecttween setting)