Rendere i percorsi assoluti, relativa al progetto di root in Webpack

Trovo che ho bisogno di digitare ../ un sacco di require() file. La mia struttura di directory include:

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

Dalla cartella components, ho bisogno di fare import foo from '../actions/fooAction'. È possibile effettuare il root directory principale del progetto? I. e. Voglio fare import foo from '/actions/fooAction' invece. Ho provato impostazione Webpack del resolve.root opzione, ma non mi sembra di fare nulla.

InformationsquelleAutor Leo Jiang | 2016-02-08



3 Replies
  1. 29

    Il resolve.root opzione non modificare come file di moduli sono risolti.

    Un modulo richiesto che iniziano con ‘/’ è un percorso assoluto del file. Per esempio, richiedono(‘/home/marco/foo.js’) per caricare il file /home/marco/foo.js.

    Il / risolve alla radice del file system.

    Forse quello che vuoi è quello di risolvere il tuo js cartella come directory dei moduli.

    webpack.config.js

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

    Con questa configurazione aggiunti al file di configurazione di dire webpack per risolvere qualsiasi import o require relative al tuo js cartella. Quindi, invece di utilizzare

    import foo from '../actions/fooAction'
    

    si sarà in grado di:

    import foo from 'actions/fooAction`
    

    Mente la mancanza di / all’inizio.

    • Ci sono (che si sente) centinaia di Overflow dello Stack domande chiedendo essenzialmente la stessa cosa, con decine di diversi Webpack di pagine di documentazione e NESSUNO DI LORO di spiegare questo concetto incredibilmente semplice nemmeno la metà chiaramente, come hai appena fatto. Grazie a te (e pox sul Webpack di persone per rendere così difficile trovare questa risposta)!
    • Può semplicemente essere impostato a ‘./’ e hanno tutto relativo alla cartella principale del progetto?
    • no, relativa al file corrente
    • resolve['root'] prende un array di oggi: github.com/webpack/docs/wiki/configuration#resolveroot
  2. 1

    Ho intenzione di rispondere a questa in modo leggermente diverso senza l’utilizzo di risolvere.root. Tutto @dresyecat detto è corretto. Tuttavia, ho appena passato attraverso lo stesso esercizio, passando da percorsi relativi dappertutto per modulo di percorsi. Qui è il doc che spiega le tre diverse tipologie di percorsi, è possibile utilizzare l’istruzione import.

    Si chiede di utilizzare un modulo di percorso, e credo che questo sia il modo migliore per andare.

    Il problema è che, per impostazione predefinita, il modulo di percorsi di lavorare solo con le cose importati tramite npm perché il nuovo moduli variabile a risolvere il default [“node_modules”]. Questo consente di importare 3rd party il codice da npm è davvero facile. Ma significa importare il codice con un percorso di modulo ha bisogno di una config cambiare. BTW, il moduli usato per essere chiamato moduleDirectories nelle versioni precedenti. Ecco i documenti per risolvere variabile di configurazione.

    Ok supponendo che si dispone di una struttura di directory come questo:

    project/
        webpack.config.json
        js/
            components
            actions
    

    È possibile impostare la directory di moduli da:

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

    Un paio di punti importanti:

    • Essere sicuri di includere il “node_modules” se si utilizza npm a tirare in 3 parti di codice, o il vostro importazioni di tali inizierà a fallire
    • Essere sicuri di importare il componente del percorso nel file di configurazione, in modo che il percorso è definito

      var path = require(‘path’);

    Quindi è possibile utilizzare il seguente (come è stato sottolineato – senza leader /) per importare i componenti utilizzando il percorso del modulo modulo:

    import "actions/fooAction";
    
  3. 0

    La risoluzione di processo è fondamentalmente semplice e distingue tra tre varianti:

    percorso assoluto: require(“/home/me/file”)

    percorso relativo: require(“../src/file”) o richiedere(“./file”)

    percorso del modulo: require(“modulo/lib/file”)

    I primi due sono abbastanza ovvio, il terzo merita uno sguardo più da vicino:

    1. Assoluto per il tuo filesystem infatti

    2. Relativa al file corrente (se il file è in src/foo/bar o webpack/config/subconfig, allora, infatti, che è…)

    3. In contrasto import (che gestisce 1+2 molto simili, ma vorresti inviare alla ricerca in node_modules subito) percorso di ‘modulo’, infatti, significa che il progetto principale per le vie senza necessità di risolvere, come output.path nel webpack config… e: (sulla risoluzione) Solo 3 è soggetto a resolve.root e resolve.moduleDirectories risoluzione, vedere webpack documentazione qui

Lascia un commento