在前端工程中使用require.context实现工程自动化

在前端工程中使用require.context实现工程自动化

一、require.context是什么？

一个webpack的api,通过执行require.context函数获取一个特定的上下文,主要用来实现自动化导入模块

二、什么时候需要用到require.context？

在前端工程中,如果遇到从一个文件夹引入很多模块的情况,可以使用这个api,它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用import导入模块
比如vue中的应用: router路由自动化挂载, 全局组件自动化注册, vuex状态自动化挂载

三、require.context()语法？

   require.context(directory,useSubdirectories,regExp)
   directory:表示检索的目录,(不可以是变量,webpack在编译阶段无法定位目录)
   useSubdirectories：表示是否检索子文件夹
   regExp:匹配文件的正则表达式,一般是文件名
   例如 require.context("@/views/components",false,/\.vue$/) 表示获得components里面的所有vue文

值得注意的是require.context函数执行后返回的是一个函数,并且这个函数有3个属性
resolve {Function} -接受一个参数request,request为test文件夹下面匹配文件的相对路径,返回这个匹配文件相对于整个工程的相对路径
keys 是一个函数 , 返回所有文件路径组成的数组
id 是上下文环境中包含的模块的id , 可能在使用module.hot.accept (热模块更新)时使用
这三个都是作为函数的属性(注意是作为函数的属性,函数也是对象,有对应的属性)

四、主要应用场景

1.常常用来在组件内引入多个组件

const path = require('path')
const files = require.context('@/components/home', false, /\.vue$/)
const modules = {}
files.keys().forEach(key => {
  const name = path.basename(key, '.vue')
  modules[name] = files(key).default || files(key)
})
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.路由中的应用

let routes = []
let require_module = require.context('.moduled',false,/.js$/)
require_module.keys().forEach((file_name) => {
	routes.push(require_module[file_name].default)
})