如何在 React 组件中将默认文件从索引更改为自定义文件？

Question

项目的结构一般是这样的：

 components
 - my-component
 - - my-component.ts
 - - index.ts

其中 index.(ts/js) 总是包含

import MyComponent from './my-component';
export default MyComponent;

我想删除 index.(js/ts) 并仍然使用路径导入/需要我的组件

import MyComponent from './components/my-component' // not having the index file!
// Please, do not suggest importing them like this
import MyComponent from './components/my-component/my-component'

我使用 Webpack 5。我知道 Webpack 4 有一个 module，但它不适用于 5。

我希望 NodeJS/Webpack 查找自定义文件名而不是索引。

Answer 1

其他一些解决方案：

• 您可以将components/my-component/my-component.ts 移动到components/my-component.ts。我假设您有理由不这样做（大概是该组件目录中的其他文件）。
• 您可以使用resolve.alias 并列出您想要的所有映射：

module.exports = {
  //...
  resolve: {
    alias: {
      "./components/my-component": path.resolve(__dirname, 'components/my-component/my-component.js'),
      //...
    },
  },
};

• 您可以设置resolve.mainFiles 来列出您所有的.js 文件名。不过这看起来很丑陋，因为它是一个全局设置。
• 你确定 Webpack 5 不支持DirectoryNamedWebpackPlugin？我是explicitly mentioned in the documentation。