按目录名导入js模块

Question

我正在升级一个 React 应用程序，发现我需要修改导入语句才能让它们工作。

例如，在旧版本中，以下导入可以正常工作：

import { User } from '../System'

请注意， System是我的文件系统上的一个目录，其中包含User ，一个以export default User结尾的 js 文件。

在我的应用程序升级版本中，系统目录仍然存在，但上面的导入给了我Can't resolve '../System' in 'C:\my app\ 。

事实证明，要让导入现在正常工作，我需要将其更改为以下内容：

import User from '../System/User';

如果我理解正确，这与使用 ES6 进行的 js模块系统更改有关。

不过，我的问题是关于 import 语句中的目录规范（上面的System ）。 为什么我以前能够在 import 语句中命名文件目录而不是实际的 js 脚本/模块本身？ 在 import 语句中使用目录的方法仍然可行吗？ 如果是这样，它是否可取？

更新：根据 AKX 的评论，我注意到System目录确实包含一个index.js ，这显然是使从目录本身导入成为可能的原因。

Answer 1

当导入指向一个目录，并且只指向一个文件时，Webpack（大多数 React 设置使用） 遵循Node 的约定，如果存在该目录，将尝试从该目录导入index.js 。 这是从指向目录的路径导入的唯一条件 - 您之前的构建可能有/System/index.js （这将允许使用from '../System'导入）。 如果您将要导入的文件重命名为其他任何文件 - 例如User.js - 仅使用目录路径导入将失败。

如果是这样，它是否可取？

当然，如果你愿意。 这是一种风格选择，但通常会这样做。