Sono ancora confuso su come risolvere i percorsi dei moduli con il webpack. Ora scrivo:

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

ma mi piacerebbe scrivere

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

Stavo pensando che resol.alias potrebbe essere d'aiuto poiché vedo un esempio simile usando { xyz: "/some/dir" }come alias allora posso require("xyz/file.js").

Ma se imposto il mio alias su { mydir: '/absolute/path/mydir' }, require('mydir/myfile.js') non funzionerà.

Mi sento stupido perché ho letto il documento molte volte e sento che mi manca qualcosa. Qual è il modo giusto per evitare di scrivere tutto il parente richiesto con ../../ecc?

Webpack> 2.0

Vedi la risposta di wtk .

Webpack 1.0

Un modo più semplice per farlo sarebbe usare resol.root.

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

resolve.root

La directory (percorso assoluto) che contiene i tuoi moduli. Può anche essere una serie di directory. Questa impostazione deve essere utilizzata per aggiungere singole directory al percorso di ricerca.

Nel tuo caso:

configurazione webpack

var path = require('path');

// ...

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

modulo di consumo

require('myfile')

o

require('myfile.js')

vedi anche: http://webpack.github.io/docs/configuration.html#resolve-modulesdirectories

Per riferimento futuro, webpack 2 ha rimosso tutto tranne modulesche per risolvere i percorsi. Questo significa rootche non funzionerà.

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

La configurazione di esempio inizia con:

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

resolve.alias dovrebbe funzionare esattamente come descritto, quindi sto fornendo questo come una risposta per aiutare a mitigare qualsiasi confusione che potrebbe derivare dal suggerimento nella domanda originale che non funziona.

una configurazione di risoluzione come quella seguente ti darà i risultati desiderati:

// 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' )funzionerà come previsto. In caso contrario, ci deve essere qualche altro problema.

Se hai più moduli che vuoi aggiungere al percorso di ricerca, resolve.rootha senso, ma se vuoi solo essere in grado di fare riferimento ai componenti all'interno del codice dell'applicazione senza percorsi relativi, aliassembra essere il più semplice ed esplicito.

Un vantaggio importante di aliasè che ti dà l'opportunità di spaziare i tuoi messaggi requireche può aggiungere chiarezza al tuo codice; proprio come è facile vedere dagli altri requirequale modulo viene referenziato, aliasti permette di scrivere descrittivi requireche rendono ovvio che hai bisogno di moduli interni, ad es require( 'my-project/component' ). resolve.rootti fa semplicemente cadere nella directory desiderata senza darti l'opportunità di spaziarla ulteriormente.

Nel caso in cui qualcun altro incontri questo problema, sono stato in grado di farlo funzionare in questo modo:

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

dove è la mia struttura di directory:

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

Quindi da qualsiasi punto della srcdirectory posso chiamare:

import MyComponent from 'components/MyComponent';

Il mio più grande mal di testa stava funzionando senza un percorso spaziale. Qualcosa come questo:

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

Prima di impostare il mio ambiente per fare questo:

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

Ho trovato molto più conveniente evitare un srcpercorso implicito , che nasconde importanti informazioni di contesto.

Il mio obiettivo è richiedere in questo modo:

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

Come vedi, tutto il mio codice app risiede in uno spazio dei nomi di percorso obbligatorio. Ciò rende abbastanza chiaro quale richiesta di chiamata richiede una libreria, un codice app o un file di prova.

Per questo mi assicuro che i miei percorsi di risoluzione siano giusti node_modulese la cartella dell'app corrente, a meno che tu non abbia spaziato l'app nella tua cartella di origine comesrc/my_app

Questo è il mio default con il webpack

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

Sarebbe ancora meglio se si imposta l'ambiente var NODE_PATHsul file di progetto corrente. Questa è una soluzione più universale e aiuterà se si desidera utilizzare altri strumenti senza webpack: test, sfilacciature ...

L'ho risolto con Webpack 2 in questo modo:

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

È possibile aggiungere più directory all'array ...

Risolto questo problema usando Webpack 2:

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

Se stai usando la app create-reazioni , puoi semplicemente aggiungere un .envfile contenente

NODE_PATH=src/

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

Questo thread è vecchio ma dal momento che nessuno ha pubblicato un post su request.context lo citerò:

È possibile utilizzare Require.context per impostare la cartella in modo che venga visualizzata in questo modo:

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

return req('./myfile.js')

Non ho capito perché qualcuno abbia suggerito di includere la directory principale di myDir nei moduliDirectory nel webpack, il che dovrebbe rendere facilmente il trucco:

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

Usa semplicemente babel-plugin-module-resolver :

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

Quindi crea un .babelrcfile sotto root se non ne hai già uno:

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

E tutto ciò che è alla radice verrà trattato come importazione assoluta:

import { Layout } from 'components'

Per supporto VSCode / Eslint, vedere qui .