Lorsque l'on développe un projet sur Gatsby, on tombe sur des imports de chemins inattendues exemple import Header from '../../../../components/Header'
Ici on ne se retrouve pas avec du spaghetti code, cependant ces composant peuvent être référencé avec des chemins sympas. Il s'agit simplement d'un import absolu 'components/Header' à la place d’un import relatif '../../../../components/Header' afin que les composants soient exposés depuis un dossier (src par exemple) qui existe sur la racine du projet.
Dans cet article, vous trouverez comment utiliser les chemins absolus sur Gatsby.
Créer le fichier gatsby-node.js
Le fichier gatsby-node.js nous permet d'intervenir pendant le processus de build de notre site. À l'aide des différentes API à notre disposition : Gatsby Node APIs, nous allons pouvoir inclure les modules de Webpack.
|
exports.onCreateWebpackConfig = ({ actions }) => { actions.setWebpackConfig({ resolve: { modules: ["node_modules", "src"], }, }) } |
On référence ensuite nos composants :
|
import Header from 'components/Header' |
Pour aller plus loin
Il est possible d'intégrer vos alias avec VSCode et d’autres Éditeur de code. Créer un fichier jsconfig.json
|
{ "compilerOptions": { "baseUrl": "." } } |
