ES6 成员导入不起作用，但默认导入有效

Question

以下代码按预期工作：

// ./mwe/index.js
let foo = () => 'foo';

const Bar = {
    foo
};

export default Bar;

// ./index.js
import Bar from './mwe';

console.log(Bar); // logs an object with a member foo that is a function

但是，这不起作用：

// ./index.js
import {foo} from './mwe';

console.log(foo); // logs undefined

为什么第二个变体不能正确解析成员 foo？

我对the documentation

下面的说法进行解读

Import a single member of a module. This inserts myMember into the current scope.
import {myMember} from 'my-module';

as 意味着如果模块导出像 Bar 这样的对象，那么我可以使用该语法导入 Bar 的各个成员。我的理解显然是不正确的，因为这行不通，但是为什么呢？我误解了哪一部分？

Answer 1

您没有导出 foo，将其更改为 export let foo = () => 'foo'; 应该可以。

Answer 2

您使用了export default，这意味着只导出了Bar。

export默认只导出他后面的变量

Answer 3

ES2015 导入语句不解构对象。它们看起来非常像对象解构，但它们是不同的。

命名导入 "destructure" 更深一层 exports 表示整个模块本身的对象。所以 import {foo} from 'bar' 意味着 const { foo } = require('bar') 而不是 const { foo } = require('bar').default。 Supported statements.

但又是特殊语法而不是对象解构。

例如你不能做

import { foo: bar } from 'baz' // syntax error

或嵌套解构

import { foo: { bar } } from 'baz' // syntax error

因此您需要导出 foo 作为单独的命名导出或使用另一个语句进行解构

import Bar from './mwe'

const { foo} = Bar

ES6 成员导入不起作用，但默认导入有效

ES6 member import not working, but default import works

ecmascript-6

es6-modules