正在深层目录中导入ES6模块

Importing ES6 modules in deep directories

本文关键字：导入 ES6 模块      更新时间：2023-09-26

给定此目录树：

components
  foo
    index.js
    bar
      index.js

使用babel es6，我想这样做：

import Foo from "./components/foo"
import Bar from "./components/foo/bar"

但它与Module build failed: Error: ENOENT: no such file or directory, open '/Users/jemminger/Development/whatever/components/foo/bar.js' 错误

我能让它工作的唯一方法是：

import Foo from "./components/foo"
import Bar from "./components/foo/bar/index"

或

import Foo from "./components/foo"
import Bar from "./components/foo/bar/"

根据https://nodejs.org/api/modules.html#modules_folders_as_modules默认情况下，我应该能够加载目录的index.js文件，这种情况发生在foo，而不是bar。

这是预期的行为吗？

Nodejs会实时导入您的文件，因此您需要始终关注当前路径。如果您想从同一点开始导入路径，请尝试使用webpack。它有resolve.root选项，可以随心所欲。只需设置你的组件根：

resolve: {
    root: [
        __dirname
    ]
}

我假设webpack.config.js将被放置在components目录旁边。然后你可以根据自己的意愿进行导入，但不需要前导./:

import Foo from "components/foo"
import Bar from "components/foo/bar"

请注意，现在npm模块components和您的文件之间发生了冲突。在这种情况下，您的代码将具有优先级。

所以，我不确定问题的原因是什么，但今天在同一个项目中尝试复制这个问题时，它按预期工作。也许只是webpack开发服务器重新启动的事实修复了它。显然我不会用电脑。

相关文章：