require.context()的用法详解

一、用法介绍

// require.context参数介绍
require.context(directory,useSubdirectories,regExp)

directory: 表示检索的目录
useSubdirectories：表示是否检索子文件夹
regExp: 匹配文件的正则表达式,一般是文件名

二、用法示例

1. 在组件内引入多个组件

const path = require("path")
const files = require.context("@/views/requireContext/components", false, /\.vue$/)
const modules = {}
files.keys().forEach((key) => {
  const name = path.basename(key, ".vue")
  modules[name] = files(key).default || files(key)
})
console.log(modules)
export default {
  components: modules,
}

2. 在main.js中引入大量公共组件

import Vue from 'vue'
// 自定义组件
const requireComponents = require.context('../views/components', true, /\.vue/)
// 打印结果
// 遍历出每个组件的路径
requireComponents.keys().forEach(fileName => {
  // 组件实例
  const reqCom = requireComponents(fileName)
  // 截取路径作为组件名
  const reqComName =reqCom.name|| fileName.replace(/\.\/(.*)\.vue/,'$1')
  // 组件挂载
  Vue.component(reqComName, reqCom.default || reqCom)
})

3. 使用插件注册全局组件

 /*
   所有在./components目录下的.vue组件自动注册为全局组件
   以<cus-***></cus-***>为组件标签名，***是组件的.name
*/
const requireContext = require.context('../components', true, /\.vue$/)
const requireAll = context => context.keys().map(context)

console.log(requireContext)
console.log(requireAll(requireContext))
export default (Vue) => {
  requireAll(requireContext).forEach(item => {
    Vue.component(`cus-${item.default.name}`, item.default)
  })
}

4. 引入vuex的module

import Vue from "vue"
import Vuex from "vuex"
// 省去了一大堆的import
// import app from "./modules/app"
// import user from "./modules/user"
import getters from "./getters"
Vue.use(Vuex)

const files = require.context("./modules", false, /\.js$/)
console.log("------------")
console.log(files.keys())
console.log("------------")
const modules = {}

files.keys().forEach((key) => {
  modules[key.replace(/(\.\/|\.js)/g, "")] = files(key).default
})

console.log("------------")
console.log(modules)
console.log("------------")

export default new Vuex.Store({
  // 省去了手动注册
  // modules: {
  //   app,
  //   user,
  // },
  modules: { ...modules },
  getters,
})

5. 引入项目中所有的svg文件

const requireContext = require.context('./svg', false, /\.svg/)
const requireAll = context => context.keys().map(context)
requireAll(requireContext)