使用require.context自动化导入模块 -- 工作笔记

最新推荐文章于 2023-07-24 13:41:07 发布

Smirky-boy

最新推荐文章于 2023-07-24 13:41:07 发布

阅读量486

点赞数

分类专栏：工作经验

本文链接：https://blog.csdn.net/simper_boy/article/details/103088528

版权

工作经验专栏收录该内容

21 篇文章 0 订阅

订阅专栏

本文介绍了在项目中遇到的require.context用法，通过这个功能可以自动化导入模块，避免手动import。文章详细解释了require.context的参数，并给出了创建文件夹、export.js文件以及在main.js中使用require.context的例子，展示了如何遍历文件夹并导出模块，最后验证了导出的模块与预期一致。

摘要由CSDN通过智能技术生成

起因：在运行公司项目的时候发现某个js文件在执行，但是我并不知道他是怎样执行了。接着我在整个项目里并没有看到import XXX from 'xxx.js’或者是require(‘xxx.js’)的字眼。最后是在主文件js里（其实也可以说是次文件吧）看到了require.context这个东东。
结果：自己写了一遍，下面是使用的例子。
先说一下require.context这个东东。

require.contextwepback官网有介绍。
require.context()函数创建自己的上下文，它可以遍历文件夹的指定文件，然后实现自动化导入模块，不用一个一个import进来。
主要有三个参数

require.context(directory, useSubdirectories = true, regExp = /^\.\/.*$/, mode = 'sync');

第一个是要搜索的文件夹，第二个是否要搜索子文件的子目录，第三个是正则表达式，筛选自己想要的那个文件,第四个我也不知道是什么意思哈哈。
下面来看例子
首先我们创建一个文件夹，里面创建一个export.js文件（我这里就指只创建一个js文件了）
在这里插入图片描述
注意这里要暴露出去
接着在主文件里面main.js写入

在这里插入图片描述

展开是这样的

接着的代码

打印结果

Vue.use(plugin.default); //这个是最后一步，注意看上面

验证

在这里插入图片描述

这里的Export等同于上面的plugin.default

最后一步创建export.vue

在这里插入图片描述

-------前端施工员工作小记