Reactjs react测试导入深度嵌套组件

我有一个

React

应用程序。文件夹如下所示：

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

因为文件夹很深，所以

testChart.js中的
import
看起来像：

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

// ...codes...

我想，
/../../../src/..
不是很友好。有没有办法让它像导入图表那样更干净

谢谢你的时间
 为网页包中的组件文件提供别名

根据公认的答案，更清楚地说：

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

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

然后在
testChart.js
中，您可以直接导入
srcDir
，如下所示

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

也许试试看？很有效，谢谢！看来我需要更多的时间来理解网页。