概述
在前端工程中,如果一个文件夹中的模块需要频繁引用,则可以使用如下自动化方式,实现一次性引入。
一、Vue2.X 版本:require.context()
-
require.context(dirname,useSubdirectories,RegExp) 是一个 webpack 的 api,通过该函数可以获取一个上下文,从而实现工程的自动化(遍历文件夹的文件,从中获取指定文件,自动导入模块)
-
参数
- dirname 需要检索的目录。String类型
- useSubdirectories 指定是否需要检索子文件夹。Boolean类型
- regExp 匹配文件的正则表达式。一般为文件名
-
返回结果
- resolve 接受一个参数request,request为文件夹下面匹配文件的相对路径,返回这个匹配文件相对于整个工程的相对路径。Function类型
- keys 返回一个数组,由匹配成功的文件所组成的数组。Function类型
- id 执行环境的 id。String类型
-
示例:
// 检索 components 目录下的 .vue 文件 const files = require.context("