require.context实现自动化导入路由模块

最新推荐文章于 2022-09-10 20:09:35 发布
最新推荐文章于 2022-09-10 20:09:35 发布
阅读量269 收藏
点赞数
分类专栏： webpack
原文链接：https://juejin.cn/post/6844904121057689608
版权

require.context 前端开发 模块导入 自动化 Webpack
关键词由CSDN通过智能技术生成

在前端工程中,如果遇到从一个文件夹引入很多模块的情况,可以使用这个api,它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用import导入模块
require.context函数接受三个参数

directory {String} -读取文件的路径

useSubdirectories {Boolean} -是否遍历文件的子目录

regExp {RegExp} -匹配文件的正则

参考文章：https://juejin.cn/post/6844904121057689608

挑战一天掉一根头发
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
自动化导入模块：require.context
Superman_peng的博客
11-06 833
在日常引入组件，模块的时候，其实目录格式都差不多，能不能一键引入所有呢？require.context 可以帮助我们实现这个功能。需要 webpack (或在内部使用了 webpack 的 Vue CLI 3+) 传统引入，如果文件有很多，就会很麻烦，而且后期每加一个文件，需要再导入一次 import moduleA from './modules/moduleA.vue' import moduleB from './modules/moduleB.vue' import moduleC from './
react自动化构建路由
sdasadasds的博客
06-28 501
在使用在编写项目的时候有种感觉就是,使用起来非常的方便,但是若是维护起来,那便是比较麻烦了,因为各大路由分散在各个组件中. 所以我们就会想到,使用中提供的模式来编写我们的路由,这样写的好处就是我们可以将逻辑集中在一处,配置路由比较方便https://gitee.com/d718781500/autoRouter我们先将下列数据定义在中在react的路由官方文档中就提供了配置集中式路由的案例,大致是这样的仿照的路由,生成一个配置文件,预期是这样的 我们可以通过上述配置,来生成一个路由.当然上述的配置也只是做了
Vue路由的模块自动化与统一加载实现
10-15
主要介绍了Vue路由的模块自动化与统一加载实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
require.context的用法。路由规则的自动化导入
阿牛哥的博客
09-10 483
require.context的用法。路由规则的自动化导入
自动化导入路由, 自动化导入Vuex的modules模块化文件
weixin_44283585的博客
07-03 309
自动化导入路由 // webpack中提供一个自动读取文件目录和文件 let moduleFn = require.context('./routes', false, /\.js$/) // key方法返回此目录中文件列表，数组 let routes = moduleFn.keys().reduce((p, c) => { let m = moduleFn(c).default if (m) { if (Array.isArray(m)) { p = p.concat(m
自动化路由
bydaxiao的博客
11-23 321
自动化路由 通过动态引入js来实现自动化路由 require.context(’.’, true, /.js$/) 使用webpack的一个方法，require.context 第一个参数是需要检索的文件夹 第二个参数是是否遍历其中的子文件夹 第三个是正则 对于路由来说，路由其实就是一个数组，只要是组成数组格式放入vue实例，应该就可以了吧 所以思路来说，就是每个路由模块抛出一个对象，然后require引入，最后添加到vue实例 代码示例： 目录结构如下 text1： const tt = [ {
require.context自动引入路由或vuex
qq_44523450的博客
11-17 374
require.context自动引入路由或vuex 1.自动引入路由 1.modules => index.js 读取modules模块内部的default，然后抛出一个数组结构 /** * @param directory 要搜索的文件夹目录不能是变量，否则在编译阶段无法定位目录 * @param useSubdirectories 是否搜索子目录 * @param regExp 匹配文件的正则表达式 * @return function 返回一个具有 resolve, keys, id
const slotsFiles = require.context('./slots', true, /\.js$/);这段代码中的require是Vue.js内置的吗
06-13
在这段代码中，`require.context` 是一个 Webpack 提供的方法，用于创建一个模块上下文，从而实现模块的自动化导入。该方法接受三个参数：要搜索的目录、是否搜索其子目录、以及匹配文件的正则表达式。 因此，这段...
多个vue子路由文件自动化合并的方法
12-02
总结，本文介绍了一个在Vue项目中自动化合并多个Vue子路由文件的方法，通过Webpack的`require.context`功能，实现了动态加载和合并子路由。这种方法有助于简化路由配置，提高项目的可维护性和开发效率。
Vue使用require.context()实现组件和路由导入
weixin_44385915的博客
07-15 1580
一般情况下在vue项目中我们引入组件都会使用如下方式： import导入的方式 这样写，写了很多的重复代码，此时可以利用require.context() 代码如下： const path = require('path') const files = require.context('./components/H5Campaign', false, /\.vue$/) const modules = {} console.log(files.keys()) files.keys().forEach(.
Context-api--module-39
03-08
Create React App入门 该项目是通过引导的。 可用脚本 在项目目录中，可以运行： yarn start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑，则页面将重新加载。 您还将在控制台中看到任何棉绒错误。 yarn test 在交互式监视模式下启动测试运行器。 有关更多信息，请参见关于的部分。 yarn build 构建生产到应用程序build文件夹。 它在生产模式下正确捆绑了React，并优化了构建以获得最佳性能。 生成被最小化，并且文件名包括哈希值。 您的应用已准备好进行部署！ 有关更多信息，请参见关于的部分。 yarn eject 注意：这是单向操作。 eject ，您将无法返回！ 如果您对构建工具和配置选择不满意，则可以随时eject 。 此命令将从您的项目中删除单个生成依赖项。 相反，它将所有配置文件和传递依赖项（webpac
【vue学习笔记】路由模块化自动载入
rookieSquads的博客
12-11 771
由于路由列表太长，不同模块的路由都凑在了一起，不方便维护和开发，因此想到将路由拆分成不同的模块，然后自动载入。 import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) // 自动导入modules中的路由 const modulesFiles = require.context('./modules', true, /\.js$/) const automaticRouter = modulesFiles.keys().
vue路由模块化(require.context)
weixin_45799605的博客
01-28 433
方法: require.context(".",true,"/.js$/") 解读:第一个参数目标文件夹,第二个参数是否查找子集,第三个参数匹配文件名的正则表达式 代码 const files = require.context(".", true, /\.js$/); let routeArray = [] files.keys().forEach(key => { if (key === './index.js') return; const defaultList..
require.context实现前端自动化导入文件
Moreisy的小镇
11-26 457
当你需要从一个文件夹内导入多个模块，挨个逐一配置劳神费力，此时可以用require.context来实现自动化导入，也就是我们常说的前端工程自动化。 先来看一个例子 const context = require.context('./file', false, /\.js$/); //导入file文件下所有的js文件 require.context('../', true, /\.stories\.js$/); //官网样例 详细解读： 一个webpack的api,通过执行require.c
使用require.context实现前端工程自动化路由vue项目
Jie0817的博客
10-25 431
require.context 一个webpack的api,通过执行require.context函数获取一个特定的上下文,主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多模块的情况,可以使用这个api,它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用import导入模块 在components/pages目录下定义文件， 注：以这种方式生成路由的话，路由路径是以你文件名决定的，所以文件名要好好规划 /** * @parms dire...
require.context()使用方法及项目实战
走走停停
03-11 4014
require.context 你还可以通过require.context()函数来创建自己的 context。 equire.context()是可以用来创建自己（模块）上下文的方法，有3个参数： 可以给这个函数传入四个参数： directory：要搜索的文件夹目录 useSubdirectories：是否还应该搜索它的子目录 regExp：一个匹配文件的正则表达式 mode：是否异步加载 webpack 会在构建中解析代码中的require.context()。 语法如下： ...
require.context和context module API 以及Vuex4 index.js配置
l963937050的博客
01-13 367
require.context和context module API 以及Vuex4 index.js配置
用require.context自动注册组件和路由
大赚万万亿
11-19 870
/************************************************************************动态添加路由 */ // 找到 router 文件夹下以 .js 命名的文件 const requireRouter = require.context(".", false, /\.js$/); requireRouter.keys().forEach(fileName => { const routerConfig = requi...
vue 动态添加路由 require.context()
weixin_34199335的博客
12-11 711
之前的写法 'use strict' import Vue from 'vue' import MessageBroadcast from 'page/MessageBroadcast' import Survey from 'page/Survey' import MessageFingure from 'page/MessageFingure' import Inte...
require.context 实现react-router6 约定式路由
最新发布
07-22
要使用 `require.context` 实现 React Router 6 的约定式路由，需要做以下几个步骤： 1. 在项目中安装 React Router 6：`npm install react-router-dom@next` 2. 创建一个文件夹来存放所有的路由组件，比如 `pages` 文件夹。 3. 在 `pages` 文件夹下创建每个路由对应的组件文件，比如 `Home.js`、`About.js` 等。 4. 在 `pages` 文件夹下创建一个 `index.js` 文件，用于导出所有路由组件。 5. 在根目录下创建一个名为 `routes.js` 的文件，用于定义约定式路由规则。 下面是一个示例的 `routes.js` 文件： ```jsx import { lazy } from 'react'; // 使用 require.context 导入所有的路由组件 const pages = require.context('./pages', true, /\.js$/); const routes = [ { path: '/', element: lazy(() => import('./pages/Home')), }, { path: '/about', element: lazy(() => import('./pages/About')), }, ]; export default routes; ``` 在上面的示例中，我们使用 `require.context` 导入了 `pages` 文件夹下的所有 `.js` 文件，并且定义了每个路由的路径和对应的组件。 最后，在根组件中使用 React Router 6 的 `Routes` 组件来渲染路由： ```jsx import React, { lazy, Suspense } from 'react'; import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; import routes from './routes'; const App = () => { return ( <Router> <Suspense fallback={<div>Loading...</div>}> <Routes> {routes.map((route, index) => ( <Route key={index} path={route.path} element={<route.element />} /> ))} </Routes> </Suspense> </Router> ); }; export default App; ``` 在上面的示例中，我们遍历 `routes` 数组，并使用 `Route` 组件来渲染每个路由。 这样就可以使用 `require.context` 实现 React Router 6 的约定式路由了。注意，这只是一个简单的示例，你可以根据自己的需求进行修改和扩展。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值