javascript - 在深层目录中导入 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选项，这正是你想要的。只需设置您的组件根目录:

resolve: {
    root: [
        __dirname
    ]
}

我假设 webpack.config.js 将放在 components 目录旁边。然后你可以随心所欲地导入，但不需要前导 ./:

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

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