当前位置:网站首页>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
边栏推荐
- Depth (penetration) selector:: v-deep/deep/ and > > >
- [Yu Yue education] reference materials of love psychology of China University of mining and technology
- Where is the future of test engineers? Confused to see
- Use go language to realize try{}catch{}finally
- Trial setup and use of idea GoLand development tool
- Analyzing several common string library functions in C language
- stm32F407-------DMA
- Prohibited package name
- elastic stack
- 去除网页滚动条方法以及内外边距
猜你喜欢

【Camera专题】手把手撸一份驱动 到 点亮Camera

查询商品案例-页面渲染数据

机器学习笔记(持续更新中。。。)

Processing of tree structure data

技术大佬准备就绪,话题C位由你决定

Technology sharing | Frida's powerful ability to realize hook functions

Redis:Redis的简单使用

Use go language to realize try{}catch{}finally

What are MySQL locks and classifications

Network security - vulnerabilities and Trojans
随机推荐
[Yu Yue education] China Ocean University job search OMG reference
[fluent] fluent debugging (debug debugging window | viewing mobile phone log information | setting normal breakpoints | setting expression breakpoints)
微信小程序開發工具 POST net::ERR_PROXY_CONNECTION_FAILED 代理問題
Ni visa fails after LabVIEW installs the third-party visa software
Missing library while loading shared libraries: libisl so. 15: cannot open shared object file: No such file
What are the differences between software testers with a monthly salary of 7K and 25K? Leaders look up to you when they master it
《上市风云》荐书——唯勇气最可贵
y54.第三章 Kubernetes从入门到精通 -- ingress(二七)
What are MySQL locks and classifications
各国Web3现状与未来
Network security - Trojan horse
Network security - DNS spoofing and phishing websites
去除网页滚动条方法以及内外边距
File class (check)
小程序开发黑马购物商城中遇到的问题
Leetcode 183 Customers who never order (2022.07.02)
What are the key points often asked in the redis interview
Certaines fonctionnalités du développement d'applets
Anna: Beibei, can you draw?
A 30-year-old software tester, who has been unemployed for 4 months, is confused and doesn't know what to do?