Je ne sais toujours pas comment résoudre les chemins de module avec webpack. Maintenant j'écris:

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

mais j'aimerais écrire

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

Je pensais que résoudre.alias peut aider puisque je vois un exemple similaire utilisant { xyz: "/some/dir" }comme alias alors que je peux require("xyz/file.js").

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

Je me sens stupide parce que j'ai lu la doc plusieurs fois et j'ai l'impression de manquer quelque chose. Quelle est la bonne façon d'éviter d'écrire tout ce que le parent requiert avec ../../etc?

Webpack> 2.0

Voir la réponse de wtk .

Webpack 1.0

Une manière plus simple de le faire serait d'utiliser resolver.root.

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

résoudre.root

Le répertoire (chemin absolu) qui contient vos modules. Peut également ê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:

configuration webpack

var path = require('path');

// ...

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

module consommateur

require('myfile')

ou

require('myfile.js')

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

Pour référence future, webpack 2 a tout supprimé mais modulescomme un moyen de résoudre les chemins. Ce moyen rootne pas fonctionner.

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)

resolve.alias devrait fonctionner exactement comme vous l'avez décrit, donc je fournis ceci comme une réponse pour aider à atténuer toute confusion qui pourrait résulter de la suggestion dans la question originale 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 avez plusieurs modules que vous souhaitez ajouter au chemin de recherche, resolve.rootcela a du sens, mais si vous souhaitez simplement pouvoir référencer des composants dans le code de votre application sans chemins relatifs, cela aliassemble être le plus simple et le plus explicite.

Un avantage important de aliasest qu'il vous donne la possibilité d'espacer vos noms, requirece 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é, aliasvous permet d'écrire des descriptifs requirequi montrent clairement que vous avez besoin de modules internes, par exemple require( 'my-project/component' ). resolve.rootvous place simplement dans le répertoire souhaité sans vous donner la possibilité de l'espace de noms plus loin.

Au cas où quelqu'un d'autre rencontrerait ce problème, j'ai pu le faire fonctionner comme ceci:

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

où ma structure de répertoires est:

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

Puis de n'importe où dans l' srcannuaire, je peux appeler:

import MyComponent from 'components/MyComponent';

Mon plus gros mal de tête fonctionnait sans un chemin d'espacement de noms. Quelque chose comme ça:

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

Avant, j'avais l'habitude de configurer mon environnement pour faire cela:

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

J'ai trouvé beaucoup plus pratique d'éviter un srcchemin implicite , qui cache des informations contextuelles importantes.

Mon objectif est d'exiger comme ceci:

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

Comme vous le voyez, tout le code de mon application vit dans un espace de noms de chemin obligatoire. Cela montre 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 sont justes node_moduleset le dossier d'application actuel, à moins que vous n'espacez votre application dans votre dossier source commesrc/my_app

C'est ma valeur par défaut avec webpack

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

Ce serait encore mieux si vous définissez la variable d'environnement NODE_PATHsur votre fichier de projet actuel. C'est une solution plus universelle et cela vous aidera si vous souhaitez utiliser d'autres outils sans webpack: test, peluchage ...

Je l'ai résolu avec Webpack 2 comme ceci:

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

Vous pouvez ajouter plus de répertoires au tableau ...

J'ai résolu ce problème en utilisant Webpack 2:

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

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

NODE_PATH=src/

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

Ce fil de discussion est ancien mais comme personne n'a posté sur require.context, je vais le mentionner:

Vous pouvez utiliser require.context pour définir le dossier à parcourir comme 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')

Je n'ai pas compris pourquoi quelqu'un a suggéré d'inclure le répertoire parent de myDir dans les modulesDirectories du webpack, cela devrait faciliter le truc:

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

Utilisez simplement babel-plugin-module-resolver :

$ npm i babel-plugin-module-resolver --save-dev

Créez ensuite un .babelrcfichier sous root si vous n'en avez pas déjà:

{
    "plugins": [
        [
            "module-resolver",
            {
                "root": ["./"]
            }
        ]
    ]
}

Et tout ce qui se trouve sous root sera traité comme une importation absolue:

import { Layout } from 'components'

Pour la prise en charge de VSCode / Eslint, cliquez ici .