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

由于文件夹较深，import内的testChart.js如下所示：

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'

Answer 2

为webpack中的组件文件提供别名

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

反应测试导入深层嵌套组件

2 个答案: