require.context实现前端工程自动化

1、require.context是什么

一个webpack中用来管理依赖的一个函数，获取一个特定上下文，主要用来自动导入模块。

2、require.context参数

require.context(directory,useSubdirectories,regExp)函数接受三个参数

(1) directory {String}—读取文件路径

(2) useSubdirectories {Boolean} —是否遍历文件的子目录

(3) regExp {RegExp} —匹配文件的正则

例如：
require.context(’./global’,true,/main.vue/);

上面的代码遍历当前目录下的global文件夹的所有.main.vue结尾的文件,遍历子目录
路径如下所示

image.png

值得注意的是require.context函数执行后返回的是一个函数,并且这个函数有3个属性

resolve {Function} -接受一个参数request,request为test文件夹下面匹配文件的相对路径,返回这个匹配文件相对于整个工程的相对路径

keys {Function} -返回匹配成功模块的名字组成的数组

id {String} -执行环境的id,返回的是一个字符串,主要用在module.hot.accept

这三个都是作为函数的属性(注意是作为函数的属性,函数也是对象,有对应的属性)

3、案例使用：

（1）注册全局组件

a、index.js文件

import Vue from 'vue'
// 前端工程自动化 导出全局组件
const requireComponent=require.context('./global',true,/main\.vue/)
console.log(requireComponent.resolve ,77);
// 返回匹配成功模块的名字组成的数组
console.log(requireComponent.keys ,75);
// 执行环境的id,返回的是一个字符串
console.log(requireComponent.id  ,76);

requireComponent.keys().forEach(filename=>{
// 匹配成功当前模块的路径
  console.log(filename,8);
  
  const component=requireComponent(filename)
  console.log(component,9);

  const ctor=component.default||component
    console.log(ctor,2);
    //注册全局组件
   Vue.component(ctor.name,ctor)
})

打印filename如下：

image.png

打印component如下

image.png

b、各个公共组件

注：每个公共main.vue中都要有一个唯一的名字

image.png

c、在main.js中引入全局注册组件的index.js文件

image.png

公共组件是，每个组件不用引入组件，直接根据组件名字使用就行

image.png

2、全局引入svg图片

要引入svg下面所有的svg文件：在该文件（icons）目录下新建一个js文件index.js 写如下代码：

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

然后在main中引入这个文件