本篇文章教你如何快速了解并使用【require.context】实现前端工程自动化

最新推荐文章于 2023-12-28 11:14:50 发布
最新推荐文章于 2023-12-28 11:14:50 发布
阅读量196 收藏
点赞数
分类专栏： Vue 文章标签： 前端 自动化 运维
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52499703/article/details/126559622
版权
本文详细介绍了require.context在前端工程中的应用，包括它的作用、使用场景、参数解析及实际操作步骤。通过require.context，可以自动化导入模块，避免手动import，尤其在处理大量路由或SVG图标时，能显著提高开发效率。
摘要由CSDN通过智能技术生成

一，require.context是什么？

一个webpack的api,通过执行require.context函数获取一个特定的上下文,主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多模块的情况,可以使用这个api,它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用import导入模块

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

如遇到以下的情况就可以使用这种方法：

在Vue写的项目中,我把路由通过不同的功能划分成不同的模块,在index.js中一个个导入(原谅ide的警告-.-),但是如果项目变大了之后,每次手动import会显得有些力不从心,这里可以使用require.context函数遍历modules文件夹的所有文件一次性导入到index.js中

 

 三，分析require.context到底是什么？

1， require.context函数有三个参数

最低0.47元/天 解锁文章
最好的人啊
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用require.context实现前端工程自动化
浩星
12-07 234
require.context是什么 一个webpack的api,通过执行require.context函数获取一个特定的上下文,主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多模块的情况,可以使用这个api,它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用import导入模块 什么时候需要用到require.context 如果有以下情况,可以考虑使用require.context替换 index.js modules 在Vue写的项目中,我把路
使用require.context实现前端工程自动化路由vue项目
Jie0817的博客
10-25 430
require.context 一个webpack的api,通过执行require.context函数获取一个特定的上下文,主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多模块的情况,可以使用这个api,它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用import导入模块 在components/pages目录下定义文件， 注：以这种方式生成路由的话，路由路径是以你文件名决定的，所以文件名要好好规划 /** * @parms dire...
使用require.contex()自动构建vue 路由, 全局组件
weixin_30247307的博客
04-11 180
//自动化部署路由 const requireComponent = require.context('../page', true, /\.vue$/); const routes = requireComponent.keys().map(fileName => { // 获取组件配置 const componentConfig = requireC...
require.context的用法。路由规则的自动化导入
阿牛哥的博客
09-10 483
require.context的用法。路由规则的自动化导入
webpack 之 require.context 用法
chelflan's blog
07-13 718
原文地址:https://blog.csdn.net/my_dream014/article/details/80264619
前端自动化require.context的使用
m0_52518047的博客
11-08 446
前端自动化require.context的使用
require.context实现前端读取文件自动化
womeiqianlene的博客
07-10 635
require.context遍历文件使用require.context遍历引入文件无需单独一个一个引入 使用require.context遍历引入文件无需单独一个一个引入 //首先声明一个变量用来存储你遍历出来的文件 let moduleExports = {}; //require.context //第一个参数是指你读取文件的路径 //第二个参数是指是否遍历文件的子目录 //第三个参数是匹配对应文件的正则表达式 const requireComponent = require.context('./组
require.context - 避免重复import
Encorehwang的博客
02-22 1170
1. require.context是什么 require.context是webpack针对依赖管理提供的一个API，通过它我们可以创建自己的上下文，它允许你传入一个目录进行搜索，一个标志指示是否应该搜索子目录，还有一个正则表达式来匹配文件。 其实是Webpack通过解析 require()的调用，提取出来如下这些信息： Directory: ./template Regular express...
require.context()的用法
婳祎
04-07 1560
一般用于加载某个目录下的多个文件，如： var request = require.context('./module', true, /\.js$/) 1、require.context()接收三个参数，第一个参数是要加载的文件目录地址，第二个参数是true或false，表示是否需要加载子目录，第三个参数是个正则表达式，表示要加载哪些文件，上面代码表示要加载module目录下的.js文件。 2、该函数有三个属性：resolve,keys,id，通过打印request.resolve,reques
前端页面 模板开发 （require.context()）
lizhongwe0418的博客
10-20 621
故事：因为最近要开发菜单模板（10多个），多个模板组成一个页面 因为有十多个模板 如果一直使用import会感觉代码很臃肿，所以这里就是用了webpack的一种api require.context()require.context(directory,useSubdirectories,regExp),接收三个参数require.context返回一个require 函数，函数有三个属性：resolve 、keys、id。首先建个index.js文件 如图格式 在index.vue加入如下代码 因为是
在Fragment中Context相关的方法：getContext()，requireContext()和requireActivity()
最新发布
hmily_lcq的专栏
12-28 1017
在Fragment中，有几个与上下文（Context）相关的方法：getContext()，requireContext()和requireActivity()，它们的区别和用法。
webpack中文网（七）内容安全策略、开发 - Vagrant、管理依赖（复习正则、`require.context`）、公共路径(public path)、集成(integrations)（NPM
qq_43456781的博客
09-06 533
webpack中文网（七）内容安全策略、开发 - Vagrant、管理依赖（复习正则、require.context）、公共路径(public path)、集成(integrations)（NPM Scripts、Grunt、Gulp） 文章目录webpack中文网（七）内容安全策略、开发 - Vagrant、管理依赖（复习正则、`require.context`）、公共路径(public path)、集成(integrations)（NPM Scripts、Grunt、Gulp）1. 内容安全策略示例启用
require.context介绍
weixin_45337170的博客
09-06 1296
简介 require.context 是 webpack 的 api，主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多模块的情况,可以使用这个 api,它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用 import 导入模块。 语法 官方文档 可以给这个函数传入三个参数：一个要搜索的目录，一个标记表示是否还搜索其子目录， 以及一个匹配文件的正则表达式。 Webpack 会在构建中解析代码中的 require.context() 。 值得注意的是 require.c
TypeScript(一)基本使用
聪明勇敢有力气的博客
11-20 813
TypeScript的基本使用
require.context的理解
qq_37405634的博客
06-30 760
对下面这段代码的理解 const srcContext = require.context('../../src', true, /\.(vue|js)$/); srcContext.keys().forEach(srcContext); 第一行代码，定义的常量 srcContext返回的内容如下： var map={ "./components/test/test.vue": "./src/...
require.context的白话版讲解
胡聊前端的博客
01-26 367
webpack打包完成之后是类似于这样的： { "1": "module1" "2": "module2" "3": "module3" ... } 当你代码中出现require('./module1')，就会为module1生成id1 当需要导入模块的时候，就会按照id寻找对应模块 言下之意，在webpack打包的过程中，id和对应的模块都已经确定了。 但如果某些模块是动态的呢？比如我又两个模块，我想在代码运行时根据条件判断来确定导入哪个，比如： require('module' + index);
由require.context引发的思考
为赋新辞。
09-12 1192
require.context 一个webpack的api，通过执行require.context函数获取一个特定的上下文，主要用来实现自动化导入模块,在前端工程中，如果遇到从一个文件夹引入很多模块的情况，可以使用这个api，它会遍历文件夹中的指定文件，然后自动导入，使得不需要每次显式的调用import导入模块 我想使用require.context引入components目录下的所有组件： we...
require.context
weixin_46211267的博客
05-18 357
vue/cli2中 /config/dev.env.js /config/prod.env.js 配置 开发环境名 NODE_ENV: '"development"' 配置 开发环境后台接口地址 BASE_API: '"http://123.57.71.29:8080"' 调用配置好的参数 axios.default.baseURL = process.env.BASE_API require.context函数接受三个参数 directory {String} -读取文件的路径 useSubdir
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值