Reagieren Import Wurzelpfad Helfer

Question

In reagieren, weil ich importieren müssen variiert Helfer oder Komponente ich dieses Problem

import approxPerDay from '../../../utils/approxPerDay.js' 
import otherstuff from '../components/otherstuff' 

und in einer anderen Datei könnte es sein, import approxPerDay from '../utils/approxPerDay.js'

Es ist wirklich schwer und Zeit zu finden raubend ist der relative Weg ist. Gibt es irgendwelche Npm oder Helfer kann dieses Problem lösen?

Answer 1

Es hängt von Ihrem Modulbündler ab. Für Webpack 2 können Sie etwas tun:

module.exports = { 
    ... 

    resolve: { 
     modules: [ 
      'node_modules', 
      path.resolve(__dirname + '/src') 
     ], 
     alias: { 
      src: path.resolve(__dirname + '/src') 
     } 
    }, 

    ... 
} 

das gleiche für Webpack 1:

module.exports = { 
    ... 

    resolve: { 
     root: [ 
      path.resolve(__dirname + '/src') 
     ], 
     alias: { 
      src: path.resolve(__dirname + '/src') 
     } 
    }, 

    ... 
} 

als Sie src als native Pfad so zu verwenden, werden in der Lage:

import approxPerDay from 'src/utils/approxPerDay.js' 
import otherstuff from '../components/otherstuff'