Ich bin immer noch verwirrt, wie man Modulpfade mit Webpack auflöst. Jetzt schreibe ich:

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

aber ich würde gerne schreiben

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

Ich dachte, dass resolve.alias helfen könnte, da ich ein ähnliches Beispiel sehe, das { xyz: "/some/dir" }als Alias verwendet wird, als ich kann require("xyz/file.js").

Aber wenn ich meinen Alias ​​auf setze { mydir: '/absolute/path/mydir' }, require('mydir/myfile.js') funktioniert das nicht.

Ich fühle mich dumm, weil ich das Dokument oft gelesen habe und das Gefühl habe, etwas zu vermissen. Was ist der richtige Weg, um zu vermeiden, dass alle relativen Anforderungen mit ../../etc geschrieben werden?

Webpack> 2.0

Siehe die Antwort von wtk .

Webpack 1.0

Ein einfacherer Weg, dies zu tun, wäre die Verwendung von resolve.root.

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

resolve.root

Das Verzeichnis (absoluter Pfad), das Ihre Module enthält. Kann auch eine Reihe von Verzeichnissen sein. Diese Einstellung sollte verwendet werden, um einzelne Verzeichnisse zum Suchpfad hinzuzufügen.

In deinem Fall:

Webpack-Konfiguration

var path = require('path');

// ...

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

Verbrauchsmodul

require('myfile')

oder

require('myfile.js')

Siehe auch: http://webpack.github.io/docs/configuration.html#resolve-modulesdirectories

Zum späteren Nachschlagen hat Webpack 2 alles entfernt modules, außer um Pfade aufzulösen. Dies bedeutet, dass rootes nicht funktioniert.

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

Die Beispielkonfiguration beginnt mit:

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

resolve.alias sollte genau so funktionieren, wie Sie es beschrieben haben, daher gebe ich dies als Antwort, um Verwirrung zu vermeiden, die sich aus dem Vorschlag in der ursprünglichen Frage ergeben könnte, dass es nicht funktioniert.

Eine Auflösungskonfiguration wie die folgende führt zu den gewünschten Ergebnissen:

// 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' )wird wie erwartet funktionieren. Wenn dies nicht der Fall ist, muss ein anderes Problem vorliegen.

Wenn Sie mehrere Module haben, die Sie dem Suchpfad hinzufügen möchten, resolve.root ist dies sinnvoll. Wenn Sie jedoch nur Komponenten in Ihrem Anwendungscode ohne relative Pfade referenzieren möchten,alias scheint dies am einfachsten und explizitesten zu sein.

Ein wichtiger Vorteil von aliasist, dass Sie die Möglichkeit haben, Ihre requires zu benennen, wodurch Ihr Code klarer wird. Genauso wie es aus anderen leicht zu erkennen requireist, auf welches Modul verwiesen wird, aliaskönnen Sie beschreibende requires schreiben , die deutlich machen, dass Sie interne Module benötigen, z require( 'my-project/component' ). resolve.rootSie werden einfach in das gewünschte Verzeichnis verschoben, ohne dass Sie die Möglichkeit haben, es weiter zu benennen.

Falls jemand anderes auf dieses Problem stößt, konnte ich es so zum Laufen bringen:

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

wo meine Verzeichnisstruktur ist:

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

Dann kann srcich von überall im Verzeichnis anrufen:

import MyComponent from 'components/MyComponent';

Meine größten Kopfschmerzen waren das Arbeiten ohne einen Pfad mit Namensraum. Etwas wie das:

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

Bevor ich meine Umgebung so eingestellt habe:

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

Ich fand es weitaus bequemer, einen impliziten srcPfad zu vermeiden , der wichtige Kontextinformationen verbirgt.

Mein Ziel ist es, Folgendes zu fordern:

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

Wie Sie sehen, befindet sich mein gesamter App-Code in einem obligatorischen Pfad-Namespace. Dies macht deutlich, für welche Aufrufe eine Bibliothek, ein App-Code oder eine Testdatei erforderlich ist.

Dafür stelle ich sicher, dass meine Auflösungspfade nur node_modulesund der aktuelle App-Ordner sind, es sei denn, Sie benennen Ihre App in Ihrem Quellordner wiesrc/my_app

Dies ist meine Standardeinstellung bei Webpack

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

Es wäre sogar noch besser, wenn Sie die Umgebungsvariable NODE_PATHauf Ihre aktuelle Projektdatei einstellen . Dies ist eine universellere Lösung und hilft, wenn Sie andere Tools ohne Webpack verwenden möchten: Testen, Flusen ...

Ich habe es mit Webpack 2 wie folgt gelöst:

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

Sie können dem Array weitere Verzeichnisse hinzufügen ...

Habe dies mit Webpack 2 gelöst:

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

Wenn Sie die Create-React-App verwenden , können Sie einfach eine .envDatei hinzufügen, die Folgendes enthält

NODE_PATH=src/

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

Dieser Thread ist alt, aber da niemand über require.context gepostet hat, werde ich ihn erwähnen:

Mit require.context können Sie festlegen, dass der Ordner folgendermaßen durchsucht wird:

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

return req('./myfile.js')

Ich habe nicht verstanden, warum jemand vorgeschlagen hat, das übergeordnete Verzeichnis von myDir in modulesDirectories im Webpack aufzunehmen, was den Trick leicht machen sollte:

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

Verwenden Sie einfach den Babel-Plugin-Modul-Resolver :

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

Erstellen Sie dann eine .babelrcDatei unter root, falls Sie noch keine haben:

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

Und alles unter root wird als absoluter Import behandelt:

import { Layout } from 'components'

Informationen zur VSCode / Eslint-Unterstützung finden Sie hier .