web-dev-qa-db-fra.com

Rendre les chemins absolus relatifs à la racine du projet dans Webpack

Je constate que je dois beaucoup taper ../ dans les fichiers require(). Ma structure de répertoire comprend les éléments suivants:

js/
  components/
    ...
  actions/
    ...

Dans le dossier des composants, je dois faire import foo from '../actions/fooAction'. Est-il possible de faire du répertoire racine la racine du projet? C'est à dire. Je veux faire import foo from '/actions/fooAction' à la place. J'ai essayé de définir l'option resolve.root de Webpack, mais cela ne semblait rien faire.

webpack
16
Leo Jiang

L'option resolve.root ne résout pas modifier comment les modules de fichiers sont résolus.

Un module obligatoire précédé de '/' est un chemin absolu vers le fichier. Par exemple, require ('/ home/marco/foo.js') chargera le fichier dans /home/marco/foo.js.

Le / est résolu à la racine de votre système de fichiers.

Ce que vous voulez peut-être peut-être résoudre votre dossier js en tant que répertoire modules .

webpack.config.js

resolve: {
  root: path.resolve('./js')
}

Avec cette configuration ajoutée à votre fichier de configuration, Webpack indiquera la résolution de tout import ou require relatif à votre dossier js. Ensuite, au lieu d'utiliser

import foo from '../actions/fooAction'

vous serez en mesure de:

import foo from 'actions/fooAction`

Attention au manque de / au début.

28
dreyescat

Je vais répondre à cette question légèrement différemment sans utiliser resol.root. Tout ce que @dresyecat a dit est correct. Cependant, je viens de faire le même exercice, qui consiste à passer de chemins relatifs à des chemins de modules. Voici la documentation qui explique les trois types de chemins que vous pouvez utiliser dans la déclaration d'importation.

Vous demandez d'utiliser un chemin de module, ce qui, à mon avis, est la voie à suivre. 

Le problème est que, par défaut, les chemins de modules ne fonctionnent qu'avec les éléments importés via npm, car la nouvelle variable modules à résoudre par défaut est ["node_modules"]. Cela vous permet d'importer du code tiers à partir de npm très facilement. Mais cela signifie que l’importation de votre code avec un chemin de module nécessite un changement de configuration. En passant, les modules s'appelaient auparavant moduleDirectories dans les versions précédentes. Voici la documentation pour la configuration de la variable de résolution.

Ok en supposant que vous ayez une structure de répertoire comme celle-ci:

project/
    webpack.config.json
    js/
        components
        actions

Vous pouvez définir le répertoire modules comme suit:

resolve: {
    extensions: [ '.ts', '.js', '*' ],
    modules: [ path.resolve(__dirname, "js"), "node_modules"]
}

Quelques points importants:

  • Assurez-vous d'inclure les "nœuds_modules" si vous utilisez npm pour extraire du code tiers, sinon vos importations de ce code commenceront à échouer.

  • Assurez-vous d'importer le composant de chemin dans votre configuration afin que ce chemin soit défini.

    var path = require ('path');

Ensuite, vous pouvez utiliser ce qui suit (comme il a été souligné - sans le /) pour importer vos composants en utilisant le formulaire de chemin de module:

import "actions/fooAction";
1
Greg Veres

Le processus de résolution est simple et distingue trois variantes:

chemin absolu: require ("/ home/me/fichier")

chemin relatif: require ("../ src/fichier") ou require ("./ fichier") 

chemin du module: require ("module/lib/file")

Les deux premiers sont assez évidents, le troisième mérite un examen plus attentif:

  1. Absolument à votre système de fichiers en effet

  2. Par rapport au fichier actuel (si ce fichier est en src/foo/bar ou webpack/config/subconfig, alors c'est tout à fait ça ...)

  3. Contrairement à import (qui traite 1 + 2 à peu près de la même façon, mais vous renvoie immédiatement à la recherche dans node_modules), chemin 'module' signifie en effet que la racine du projet contient des chemins sans qu'il soit nécessaire de les résoudre, comme output.path dans la configuration de votre webpack. .. et: (à la résolution) Seulement 3 est soumis à la résolution de resolve.root et de resolve.moduleDirectories, voir la documentation webpack ici

0
Frank Nocke