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

的以下陈述

导入模块的单个成员。这会将myMember插入当前范围。
import {myMember} from 'my-module';

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

Answer 1

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

命名导入＆＃34; destructure＆＃34;一级深度的一些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

Answer 2

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

Answer 3

您使用了export default，这意味着只会导出条形码。

导出默认值仅导出跟在他后面的变量。

ES6成员导入无效，但默认导入有效

3 个答案: