reactjs - react 测试导入深层嵌套组件

Question

我有一个 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/... 不是很友好。有什么方法可以让它更干净，比如 import charts/Charts.jsx？

感谢您的宝贵时间!

Answer 1

根据接受的答案，更清楚:

// 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'