在深层目录中导入ES6模块

Question

鉴于此目录树：

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。

这是预期的行为吗？

Answer 1

Nodejs负责地导入您的文件，因此您始终需要关心当前路径。如果要从同一点开始导入路径，请尝试使用webpack。它有resolve.root选项，可以完全按照您的要求进行操作。只需将组件设置为root：

resolve: {
    root: [
        __dirname
    ]
}

我假设webpack.config.js将放在components dir旁边。然后你可以根据需要进行导入，但不能引导./：

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

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

Answer 2

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