使用require.context，实现去路由中心化管理

最新推荐文章于 2024-03-13 23:27:09 发布
最新推荐文章于 2024-03-13 23:27:09 发布
阅读量275 收藏 2
点赞数
文章标签： js nodejs javascript web java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/petertanjinjie/article/details/108505771
版权

什么是webpack的require.context？

官网解释：

您可以使用require.context()函数创建自己的上下文。

它允许您传入一个目录进行搜索，一个标志表示是否也应该搜索子目录，以及一个正则表达式来匹配文件。

在构建时，webpack解析代码中的require.context()。

直接在项目中使用，我的webpack4+react的一个开源项目，很早之前写的移动端项目，大家有兴趣可以看看，给个Star。

gitHub地址：
https://github.com/JinJieTan/react-webpack

并且这个项目还是带docker+gitHub+Travis CI的，教程在我之前写的这里：

最低0.47元/天 解锁文章
Peter 谭
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端技术栈(四)：react-router，去中心化式路由
飞久
03-12 1087
1.静态路由 vs. 动态路由 在Web前端开发中，我们经常会需要处理页面路由问题。习惯上，路由信息会在一个地方集中配置好，我们可以称之为“静态路由”，或者叫“中心化式路由”。以react-router v3版本为例，代码类似下面这样： import { Router, Route, IndexRoute, browserHistory } from 'react-router' const A...
node.js之require
weixin_34014277的博客
08-21 83
1.require.resolve('./testModeule.js')在REPL运行环境下输入，可以查询到当前目录下textModeule.js模块文件的完整文件名 2.require.cache对象代表缓存了所有已被加载模块的缓存区，可以使用console.log(require.cache)开查看缓存区的内容 3filename变量与dirname变量 3.1_filename:用...
vue使用require.context配置路由
dtbk123的博客
06-07 1051
使用require.context自动配置路由 首先在components文件夹下新建一个pages文件夹，然后在pages下面新建两个vue文件mode.index.vue和mode.show.vue，在components文件夹下新建一个index.route.js文件 //index.route.js var r=require.context('./pages',true,/.vue/) var arr=[] r.keys().forEach(element => { var k
用 node 实现类似 webpack 的 require.context()功能
前端开发者
09-18 7028
用 node 实现类似 webpack 的 require.context()功能 简介：最近在写 nuxt 的项目，因为是服务端渲染，需要加载大量国际化文件，一个一个导入太费劲，于是想自动导入，首先想到的是 webpack 的 require.context()功能，可是服务端渲染用不了。于是自己用 node 写了一个文件加载器。 文件目录 . ├── autoLoadFile.js └── langs ├── app │ ├── en.js │ └── zh.js
用require.context自动注册组件和路由
大赚万万亿
11-19 836
/************************************************************************动态添加路由 */ // 找到 router 文件夹下以 .js 命名的文件 const requireRouter = require.context(".", false, /\.js$/); requireRouter.keys().forEach(fileName => { const routerConfig = requi...
使用require.context完成本地图片批量导入
04-02
将我的博客文章（https://blog.csdn.net/IT_interest/article/details/122973985）中的内容用项目实现出来，功能为：使用webpack中的require.context功能，批量导入本地图片，并且可根据需要支持多格式图片导入。...
demo-require-context:演示如何使用 require.context 实现自动注册vue-router路由
05-14
本项目演示 require.context 如何帮助开发者更方便地开发 vue 项目 示例的自动注册路由方法在实际项目中可能并没有太大的实用性，依项目复杂度而定 另一个关于 require.context 的示例 demo 只作为抛砖引玉，欢迎...
webpack的 rquire.context用法实现工程自动化的方法
10-15
`require.context`是 Webpack 提供的一个强大功能，它允许我们在运行时动态地加载模块，实现自动化注册和管理组件，极大地提高了工程化的效率。 **1. `require.context`的基本使用：** `require.context(directory...
require.context-demo
05-11
自动格式化代码 更改页面<title> 安装依赖项 导入组件 代码分割 添加样式表 后处理CSS 添加CSS预处理器（Sass，Less等） 添加图像，字体和文件 使用public文件夹 更改HTML 在模块系统之外添加资产 何时...
基于Require.js使用方法(总结)
10-19
下面小编就为大家带来一篇基于Require.js使用方法(总结)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
[react代码片段] require.context
qq_14993591的博客
12-10 1170
require.context('./components/', true, /\.js$/) const ctx = require.context('./components/', true, /\.js$/) console.log(ctx.keys()) // ["./A.js", "./B.js", "./C.js", "./D.js"] const ctx = require.context('./components/', true, /\.js$/) const map = {} f
react自动化构建路由(简)
weixin_45760365的博客
11-11 689
react自动化构建路由(简) //require.context() // 1. 一个要搜索的目录， // 2. 一个标记表示是否还要搜索其子目录， // 3. 一个匹配文件的正则表达式。 let context = require.context("views", true, /\.js$/); let paths = context.keys()//获取了所有文件的路径 let routes = paths.map(path => { //批量获取引入的组件 let c
50 webpack核心API-require.context
sinat_41212418的博客
12-16 215
require.context Webpack默认支持ES6，CommonJs，AMD等模块语法，所以你可以使用这些模块语句来编写你的项目。有关于这些模块对应的方法的使用，在这里不做阐述，在这里针对Webpack中require.context的使用进行简单介绍。 require.context方法会创建一个上下文，允许通过检索一个目录来引入对应的文件。其拥有三个参数，含义如下： directory：需要检索的目录 useSubdirectories：是否检索子目录 regExp: 匹配文件的正则表达式
Vue项目实现路由的去中心化管理
weixin_40817406的博客
05-13 284
原理
React 解决问题篇 ——关于 require 动态地址引用的问题
风华流沙君莫笑的博客
12-01 2091
关于 require 图片动态地址引用的问题 这篇帖子记录一下今天改了一下午的Bug以及解决办法(刚刚开始学习React 所以很多东西不太了解 所以需要一点一点的去学习积累 ) 今天在做图片上传的时候 上传上去后有一个回显操作 用的是require 去引用从后台传来的图片地址 后台传过来后我先是用了一个变量去接受然后将这个变量放在了require中 但是就一直报错 Cannot find module '../../assets/images/xxx.jpg' 然后后来在网上看到了 require 中
分享：使用 webpack 的 require.context 实现路由“去中心化”管理
强哥叨逼叨
12-05 2691
阅读须知：示例代码以 react-router V3 为例。其他路由同样适用，如：vue-router。同样其他的功能模块也可以用该思路进行相应的去中心化管理改造。 本文示例代码 一个项目中路由的变化过程 当你在开发一个大型单页面应用的时候，项目之初一般做法是所有的路由规则都维护在一个route.js的文件里。 // rootRoute.js const rootRoute =
React(react-router-dom) 根据路径自动配置路由，简单处理
m0_37602317的博客
10-19 1493
React(react-router-dom) 根据路径自动配置路由，简单处理 # 创建 create-react-app npx create-react-app my-app cd my-app npm start 在 src 目录下创建页面文件夹，如 pages # 安装 react-router-dom yarn add react-router-dom // app.js import './App.css'; import { BrowserRouter as Router, Route,
解决create-react-app项目下使用require.context问题
最新发布
weixin_42390185的博客
03-13 263
解决create-react-app项目下使用require.context问题
Vue使用require.context()实现组件和路由导入
weixin_44385915的博客
07-15 1573
一般情况下在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(.
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、付费专栏及课程。

余额充值