highlight: a11y-dark
require.context函数执行后返回的是一个函数,并且这个函数有3个属性
/**
* @author knockkey
*/
import SvgIcon from '@/components/SvgIcon'
// !1.导入所有的svg图标
// https://webpack.docschina.org/guides/dependency-management/#requirecontext
// 通过 require.context() 函数来创建自己的 context
// 这个api是wevpack的api, 目的是帮助我们导入依赖
// !接收三个参数: 第一个 -> 要搜索的目录,读取文件的路径 第二个 -> 是否遍历文件的子目录 第三个匹配文件的正则表达式
const svgRequire = require.context('./svg', false, /\.svg$/)
// require.context函数的作用是 遍历xxx文件夹里面的所有文件 并一次性导入xxx文件中.
// require.context函数执行后返回的是一个函数,并且这个函数有3个属性
// resolve {Function} -接受一个参数request,request为svg文件夹下面匹配文件的相对路径,返回这个匹配文件相对于整个工程的相对路径
// keys {Function} -返回匹配成功模块的名字组成的数组
// id {String} -执行环境的id,返回的是一个字符串,主要用在module.hot.accept,应该是热加载
// 这三个都是作为函数的属性(注意是作为函数的属性,函数也是对象,有对应的属性)
// https://www.jianshu.com/p/c894ea00dfec 参考这个链接
// 可以通过 require.keys() 获取到所有的 svg 图标
// console.log(svgRequire.keys())
/**
* 0 -> "./article-create.svg"
* 1 -> "./article-ranking.svg"
* 2 -> "./article.svg"
*
* */
// 遍历图标，把图标作为 request 传入到 require 导入函数中，完成本地 svg 图标的导入
svgRequire.keys().forEach(svgIcon => {
// console.log(svgRequire(svgIcon)) //打印处理啊Module模块
// 同时svgRequire作为一个函数,也接受一个req参数,
// 这个和resolve方法的req参数是一样的,即匹配的文件名的相对路径,而svgRequire函数返回的是一个模块,这个模块才是真正我们需要的
svgRequire(svgIcon)
// 这个Module模块和使用import导入的模块是一样的
})
// !2. 完成SvgIcon的全局注册
// 导出一个函数, 这个函数接收一个参数, 这个app就是对应main.js里面的app, 通过这样一个app的components方法来完成全局注册
export default app => {
app.component('svg-icon', SvgIcon)
}
/***
* 完成SvgIcon的全局注册, 在vue2比较简单
* Vue.component('svg-icon', SvgIcon)
* 但是在vue3里面没有了vue这个实例方法了, 所以需要按照以上代码进行全局注册
*/
