使用require.context()实现前端自动化导入
使用require.context()实现前端自动化导入
·
1、require.context是什么
一个webpack的api，require.context主要用来实现前端自动化导入模块，它会遍历文件夹中指定文件，然后自动导入，不需要每次使用的时候使用import导入模块
2、使用场景
从一个文件夹中引入多个模块
3、参数
require.context(directory,useSubdirectories,regExp)接受三个参数
| 参数 | 类型 | 说明 |
| directory | 字符串 | 读取文件的路径 |
| useSubdirectories | 布尔值 | 是否遍历子文件夹 |
| regExp | 正则表达式 | 匹配文件的正则表达式，一般是文件名 |
例：
// 读取svg文件夹下所有的以.svg结尾的文件（不读取子目录）
const req = require.context('./svg', false, /\.svg$/)
4、返回值
值得注意的是require.context()执行后返回值是一个函数,并且这个函数有3个属性
| 属性 | 类型 | 说明 |
|---|---|---|
| resolve | 函数 | 接受一个参数request，request为文件夹下面匹配文件的相对路径，返回这个匹配文件相对于整个工程的相对路径 |
| keys | 函数 | 返回一个数组，由匹配成功的文件所组成的数组 |
| id | 字符串 | 执行环境的 id |
一站式 AI 云服务平台
更多推荐
1
0- 0
已为社区贡献1条内容
所有评论(0)