React.js/Solid.js导入回退：能否用同名文件替代index.js？

不管是Node.js环境还是Webpack、Vite这类前端打包工具，都能实现将文件夹下的同名文件作为默认导入目标，具体分两种场景操作：

1. Node.js 环境 #

在你的Component文件夹里新建一个package.json文件，写入以下内容：

{
  "main": "./Component.js"
}

之后再用import Component from './Component'导入时，Node.js就会自动指向文件夹内的Component.js，而非默认查找index.js。

2. 前端打包工具（Webpack/Vite） #

这类工具支持自定义模块解析规则，直接在配置文件里修改默认查找的主文件名即可：

Webpack 配置 #

在webpack.config.js里修改resolve.mainFiles，把与文件夹同名的文件名放在查找列表的前面：

module.exports = {
  resolve: {
    mainFiles: ['Component', 'index'] // 优先查找Component.js，找不到再 fallback 到index.js
  }
};

Vite 配置 #

在vite.config.js里做类似配置：

import { defineConfig } from 'vite';

export default defineConfig({
  resolve: {
    mainFiles: ['Component', 'index']
  }
});

如果项目里有大量组件都需要这种导入方式，也可以写动态逻辑让工具自动匹配文件夹名对应的文件，但上面的基础配置已经能满足单个组件的需求。

内容的提问来源于stack exchange，提问作者AndrewSunshiny