web-dev-qa-db-fra.com

La résolution nécessite des chemins avec webpack

Je ne comprends toujours pas comment résoudre les chemins de modules avec Webpack. Maintenant j'écris:

myfile = require('../../mydir/myfile.js')

mais j'aimerais écrire

myfile = require('mydir/myfile.js')

Je pensais que resol.alias peut aider car je vois un exemple similaire qui utilise { xyz: "/some/dir" } comme alias, alors je peux require("xyz/file.js").

Mais si je règle mon alias sur { mydir: '/absolute/path/mydir' }, require('mydir/myfile.js') ne fonctionnera pas.

Je me sens bête parce que j'ai lu la doc plusieurs fois et j'ai l'impression de rater quelque chose. Quelle est la bonne façon d'éviter d'écrire tous les besoins relatifs avec ../../ etc.?

javascriptwebpack
157
gpbl

Webpack> 2.0

Voir réponse de wtk .

Webpack 1.0

Une façon plus simple de faire cela serait d’utiliser resol.root.

http://webpack.github.io/docs/configuration.html#resolve-root

resolve.root

Le répertoire (chemin absolu) contenant vos modules. Peut aussi être un tableau de répertoires. Ce paramètre doit être utilisé pour ajouter des répertoires individuels au chemin de recherche.

Dans ton cas:

config webpack

var path = require('path');

// ...

  resolve: {
    root: path.resolve('./mydir'),
    extensions: ['', '.js']
  }

module de consommation

require('myfile')

ou

require('myfile.js')

voir aussi: http://webpack.github.io/docs/configuration.html#resolve-modulesdirectories

139
AndyCunningham

Pour référence ultérieure, le Webpack 2 a supprimé tout sauf modules comme moyen de résoudre les chemins. Cela signifie que root ne fonctionnera pas .

https://Gist.github.com/sokra/27b24881210b56bbaff7#resolving-options

L'exemple de configuration commence par:

{
  modules: [path.resolve(__dirname, "app"), "node_modules"]
  // (was split into `root`, `modulesDirectories` and `fallback` in the old options)
69
wtk

resolve.alias devrait fonctionner exactement comme vous l'avez décrit. Je propose donc cette réponse pour aider à atténuer toute confusion pouvant résulter de la suggestion dans la question initiale que cela ne fonctionne pas.

une configuration de résolution comme celle ci-dessous vous donnera les résultats souhaités:

_// used to resolve absolute path to project's root directory (where web pack.config.js should be located)
var path = require( 'path' );
...
{
  ...
  resolve: {
    // add alias for application code directory
    alias:{
      mydir: path.resolve( __dirname, 'path', 'to', 'mydir' )
    },
    extensions: [ '', '.js' ]
  }
}
_

require( 'mydir/myfile.js' ) fonctionnera comme prévu. Si ce n'est pas le cas, il doit y avoir un autre problème.

Si vous souhaitez ajouter plusieurs modules au chemin de recherche, resolve.root est logique, mais si vous souhaitez simplement pouvoir référencer des composants dans le code de votre application sans chemins relatifs, alias semble être le plus simple et explicite.

Un avantage important de alias est qu’il vous donne l’occasion de nommer votre nom de domaine requires, ce qui peut ajouter de la clarté à votre code; tout comme il est facile de voir à partir d'autres requires quel module est référencé, alias vous permet d'écrire une description requires qui rend évident que vous avez besoin de modules internes, par exemple. require( 'my-project/component' ). resolve.root vous insère simplement dans le répertoire souhaité sans vous donner la possibilité de l’espacer.

63
sethro

Si quelqu'un d'autre rencontrait ce problème, je pouvais le faire fonctionner ainsi:

var path = require('path');
// ...
resolve: {
  root: [path.resolve(__dirname, 'src'), path.resolve(__dirname, 'node_modules')],
  extensions: ['', '.js']
};

où ma structure de répertoire est:

.
├── dist
├── node_modules
├── package.json
├── README.md
├── src
│   ├── components
│   ├── index.html
│   ├── main.js
│   └── styles
├── webpack.config.js

Puis de n'importe où dans le répertoire src, je peux appeler:

import MyComponent from 'components/MyComponent';
14
Alex Klibisz

Mon plus gros mal de tête travaillait sans chemin d'accès espacé. Quelque chose comme ça:

./src/app.js
./src/ui/menu.js
./node_modules/lodash/

Avant de configurer mon environnement pour ce faire:

require('app.js')
require('ui/menu')
require('lodash')

J'ai trouvé beaucoup plus pratique d'éviter un chemin implicite src, qui cache d'importantes informations de contexte.

Mon but est d'exiger comme ceci:

require('src/app.js')
require('src/ui/menu')
require('test/helpers/auth')
require('lodash')

Comme vous le voyez, tout mon code d'application vit dans un espace de noms de chemin obligatoire. Cela indique clairement quel appel nécessite une bibliothèque, un code d'application ou un fichier de test.

Pour cela, je m'assure que mes chemins de résolution ne sont que node_modules et le dossier de l'application en cours, sauf si vous nommez votre application dans votre dossier source comme src/my_app.

Ceci est mon défaut avec webpack

resolve: {
  extensions: ['', '.jsx', '.js', '.json'],
  root: path.resolve(__dirname),
  modulesDirectories: ['node_modules']
}

Ce serait encore mieux si vous définissez l'environnement var NODE_PATH sur votre fichier de projet actuel. Il s’agit d’une solution plus universelle qui vous aidera si vous souhaitez utiliser d’autres outils sans WebPack: tests, lintérisation ...

5
SystematicFrank

J'ai le résoudre avec Webpack 2 comme ceci:

module.exports = {
  resolve: {
    modules: ["mydir", "node_modules"]    
  }
}

Vous pouvez ajouter plus de répertoires à la matrice ...

3
Damjan Pavlica

Vous avez résolu ce problème avec Webpack 2:

   resolve: {
      extensions: ['', '.js'],
        modules: [__dirname , 'node_modules']
    }
3
Aaqib

Si vous utilisez create-react-app , vous pouvez simplement ajouter un fichier .env contenant

NODE_PATH=src/

Source: https://medium.com/@ktruong008/absolute-imports-with-create-react-app-4338fbca7e3d

1
Brian Burns

Ce sujet est ancien mais vu que personne n'a posté à propos de require.context, je vais le mentionner:

Vous pouvez utiliser require.context pour définir le dossier de manière à ce qu'il ressemble à ceci:

var req = require.context('../../mydir/', true)
// true here is for use subdirectories, you can also specify regex as third param

return req('./myfile.js')
1
altShiftDev

Je n'ai pas compris pourquoi quelqu'un a suggéré d'inclure le répertoire parent de myDir dans modulesDirectories du webpack, ce qui devrait faciliter la tâche:

resolve: {
    modulesDirectories: [
      'parentDir',
      'node_modules',
    ],
    extensions: ['', '.js', '.jsx']
  },
0
daniele bertella