前言

最近看项目有用到这个，就记录下希望对各位朋友有所帮助，如果不对希望能指出。

因为是自己的学习的过程兄弟们可以直接看案例

一、认识 require.context

require 跟 CommonJS 的require的区别

CommonJS require

主要是用于node 模块中的导入承接别的模块用module.exports 或 exports 导出的模块

详情可看：https://blog.csdn.net/qq_48255096/article/details/129589232

这个在html文件是无法使用的只在node中可以，所以兄弟们不要想着在html的script直接使用啦那么两者一样么？让我们拿出证据吧

两者分别的输出结果

CommonJS的输出结果

req.js 中的代码很简单就做个输出

console.log(require)
console.log(require.context)

cmd 运行

看下在main.js 输出的require 是怎样的

看到这里我们或许有一下两个疑问

这里我们明显看出require是不一样的那么 vue 里的 require 还能引用 node 模块里的包么？

答案肯定是可以: --用过vue的都知道 require 是能正常引用node 相关的包的常见引用有 path
这里的require.context 打印的时候明明是undefined 为啥能进行函数执行并打印出值？

这是因为 -- require.context 是 Webpack 中一个特殊的语法，Webpack 在编译阶段会分析语法树找出带有该语法的部分，你可以理解为一个用来做替换的标记，不代表真的存在这么一个 function，你是打印不出来的。

vue 中 require.context 的庐山正面目

其实是webpack中的一个api 我们可以看看官网是怎么说的

webpack官网

二、案例

1、公共组件 - 全局注册

// 制作插件 作为Vue.use 使用
// 插件 -- 导出一个函数 -- 导出一个包含install的对象
export default {
  install: function (Vue) {
    if (this.installed) return
    this.installed = true
    let context = require.context('./common', false, /\.vue$/)
    context.keys().map(path => {
      let name = path.replace(/\.\\/,'').replace(/\.vue$/, '')
      let model = context(path).default
      Vue.component(name, model)
    })
  }
}

main.js

import comComponents from '@/components/index.js'
Vue.use(comComponents)

2、公共指令注册

export default {
  install: function (Vue) {
    if (this.installed) return
    this.installed = true
    let context = require.context('@/directive/model', false, /\.js$/)
    context.keys().map(path => {
      let name = path.replace(/\.\//, '').replace(/\.js/, '')
      // 这里相当于 import 导入模块
      let model = context(path).default
      Vue.directive(name, model)
    })
  }
}

总结

这里我们可以看出require.context的使用其实很简单三个参数目录，是否查询子目录，正则，然后根据项目设定的规则进行相关内容的导出拼接。最后谢谢观看，如果有看到别的地方有特殊的使用上这个的记得说下这里更新上去哈哈哈

require.context 在 vue 中的简单应用

前言