如何配置Babel（或Babel插件）以自动将目录导入转换为目录中的文件？

Question

编写React组件时，我发现自己采用这种目录样式，以便在组件需要支持文件时（CSS模块，图像等）：

src/components/Simple.jsx
src/components/Complex/Complex.jsx
src/components/Complex/Complex.module.scss
src/components/Complex/otherExampleSupportFile.js

将主要组件放在一个名为与目录相同的文件中（因为如果主代码总是在目录index.jsx中，所有代码编辑器选项卡都会说“索引”，这会让人感到困惑）。

但是如果有人想要尝试从src/components/Complex/index.js导入复合体，则需要一个包含export default from './Complex';的小src/components/Complex文件，就像它们导入src/components/Simple一样。此解决方法允许导入工作，但会在构建中添加额外的存根模块。

我如何配置Babel（或Babel插件）来转换这样的导入：

import Complex from 'src/components/Complex';

进入：

import Complex from 'src/components/Complex/Complex';

目标路径是目录（并且不包含任何index.js / index.jsx个文件）？

例如，给定这些文件：

src/components/Complex/Complex.jsx
src/components/Manual/index.jsx
src/components/Simple.jsx

这些进口商品：

import Complex from 'src/components/Complex';
import Manual from 'src/components/Manual';
import Simple from 'src/components/Simple';

Babel将会转变为类似的东西（不包括_interopRequireDefault包装器）：

var Complex = require('src/components/Complex/Complex.jsx');
// and these would remain unchanged from Babel's current behaviour…
var Manual = require('src/components/Manual/index.jsx');
var Simple = require('src/components/Simple.jsx');