reagieren Test Import tief verschachtelte Komponenten

Question

Ich habe eine React App. Die Ordner sieht wie folgt aus:

├── src 
│   ├── App.jsx 
│   └── components 
│      ├── charts 
│      │   ├── Chart.jsx 
│      └── editor 
│         └── Editor.jsx 
│ 
├── test 
│   └── testComponents 
│  ├── testCharts 
│  │ └── testChart.js 
│    └── testEditor 
│     └── testEditor.js 
│ 
├── package.json 
└── webpack.config.js 

Da die Ordner tief sind, die import innen testChart.js wie folgt aussieht:

import Chart from './../../../src/components/charts/Chart.jsx' 

// ...codes... 

Die ./../../../src/ ... nicht sehr freundlich ist, denke ich. Gibt es eine Möglichkeit, es sauberer zu machen wie import charts/Charts.jsx?

Danke für Ihre Zeit!

Answer 1

Give Alias ​​Component-Dateien in webpack

https://webpack.js.org/configuration/resolve/

Answer 2

Basierend auf der akzeptierte Antwort, um mehr klar:

// webpack.config.js 
// ... 
var path = require('path') 

module.exports = { 
    // ... 
    resolve: { 
    alias: { 
     srcDir: path.resolve(__dirname, 'src/') 
    } 
    } 
} 

Dann in testChart.js Sie direkt srcDir wie folgt importieren könnte.

import Chart from 'srcDir/components/charts/Chart.jsx'