React项目简化组件导入：如何通过文件夹直接引用同名组件？

一、基础方案：用index.js实现直接导入文件夹 #

在每个组件的文件夹里新建一个index.js文件，只用一行代码导出该文件夹内的同名组件：

// TestComponent/index.js
export { default } from './TestComponent.jsx';

完成后，导入组件时就不用写具体文件名了，直接写文件夹路径即可：

import TestComponent from "../../TestComponent";

二、进阶优化：用jsconfig.json简化路径 #

如果嫌../../这类相对路径麻烦，可以通过jsconfig.json配置路径别名，步骤如下：

1. 在项目根目录新建jsconfig.json文件，写入以下配置：

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "@components/*": ["components/*"]
    }
  },
  "include": ["src"]
}

• baseUrl设为src，将源码目录作为路径解析的根目录
• @components/*是自定义的路径别名，对应src/components/*的实际路径

2. 配置生效后，就能用别名直接导入组件，不用再纠结层级：

import TestComponent from '@components/TestComponent';

如果是TypeScript项目，把jsconfig.json换成tsconfig.json，配置内容完全通用。

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