require.context

require.context
Un require que funciona con regex

👋 Hey! Soy Richard
@sparragus
Puertorriqueño, web engineer,
hago podcasts

Preámbulo
(tl;dr: Esta plática realmente no de es folder
structuring)

@sparragus
•src/
•pages/
•components/
•index.js
Pero por si tienen curiosidad:

Nada que ver
con el
Context API de React

@sparragus
src
├── app.js
└── pages
├── home
│ ├── index.css
│   └── index.js
├── about
│ ├── index.css
│   └── index.js
└── contact
├── index.css
  └── index.js

@sparragus
const Home = require("./pages/home");
const About = require("./pages/about");
const Contact = require("./pages/contact");
<Router>
<Route path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</Router>

@sparragus
function Home() {
return (
<div>
<h1>Hey! Soy Richard</h1>
<nav>
<ul>
<li><Link to="/about">About</Link></li>
<li><Link to="/contact">Contact</Link></li>
</ul>
</nav>
</div>
);
}
module.exports = Home;

@sparragus
• Input <= Expresión regular
• Output => Context
• Una función que nos permite hacer require solamente a los
archivos que hacen “match” con la expresión regular
require.context

@sparragus
const context = require.context(
"./pages", // Un punto de partida del contexto
true, // Quiero buscar en los subdirs
/index.js$/ // El regex para encontrar files
);
const Home = context(‘./home/index.js’);

@sparragus
const context = require.context("./pages", true, /index.js$/);
src
├── app.js <--------------- Estamos aquí
└── pages <--------------- El directorio que especificamos
├── home
│ ├── index.css <----- ❌
│   └── index.js <----- ✅ (Match con el regex)
├── about
│ ├── index.css <----- ❌
│   └── index.js <----- ✅
└── contact
├── index.css <----- ❌
  └── index.js <----- ✅

@sparragus
const styles = context('./home/index.css');

@sparragus
const styles = context('./home/index.css');
💥Error: Cannot find module ‘./home/index.css’

@sparragus
const context = require.context(
"./pages", // A directory
true, // Use subdirectories
/index.js$/ // A regex for matching files
);
const Home = context(‘./home/index.js’);
const About = context(‘./about/index.js’);
const Contact = context(‘./contact/index.js’);
<Router>
<Route path="/" component={Home} />
...
</Router>

@sparragus
• Input <= Expresión regular
• Output => Context
• Una función que nos permite hacer require solamente a los
archivos que hacen “match” con la expresión regular
• { 
keys() 
}
require.context

@sparragus
const context = require.context("./pages", true, /index.js$/);
const Home = context('./Home');
const filenames = context.keys();
console.log(filenames);
⮑ [ "./home/index.js", "./about/index.js", "./contact/index.js" ]
Función
Objeto

@sparragus
function getPathFromFilename (filename) { ... }
const context = require.context(...);
const routes = filenames.map(filename => ({
path: getPathFromFilename(filename),
component: context(filename)
});

@sparragus
const routes = [{...}, {...}, {...}];
<Router>
{routes.map(route =>
<Route path={route.path} component={route.component} />
)}
</Router>

require.context

Más contenido relacionado

Similar a require.context (20)

Más de Richard Kaufman (6)

Último (20)

require.context