Question

我可以在导入时构造默认导出对象吗？

给出以下导出语法（export default）

const foo = ...
function bar() { ... }

export default { foo, bar };

以下导入语法是否有效？

import { foo, bar } from './export-file';

我问，因为它可以在我的系统上运行，但是我被告知它不应该按照规范工作。

Answer 1

我可以在导入时构造默认导出对象吗？

没有。您只能在将对象导入变量后对其进行解构。

请注意，导入/导出的语法和语义与对象文字/对象模式的语法和语义完全不同。唯一常见的是两者都使用大括号，而且它们的速记表示（只有标识符名称和逗号）是无法区分的。

以下导入语法是否有效？
import { foo, bar } from './export-file';

是。它确实从模块导入两个命名导出。这是

的简写符号

import { foo as foo, bar as bar } from './export-file';

表示“声明绑定foo并让它引用从foo名称export-file下导出的变量，并声明绑定bar并让它引用从bar“名称export-file下导出的变量。

给出以下导出语法（导出默认值）
export default { foo, bar };
上面的导入是否适用于此？

否。它的作用是声明一个不可见变量，使用对象{ foo: foo, bar: bar }对其进行初始化，然后将其导出名称default。
将此模块导入export-file时，将不会使用名称default，并且找不到名称foo和bar，这会导致 {{ 1}}

要解决此问题，您需要导入默认导出的对象：

SyntaxError

或者保留导入语法，改为使用命名导出：

import { default as obj } from './export-file'; const {foo: foo, bar: bar} = obj; // or abbreviated: import obj from './export-file'; const {foo, bar} = obj;

Answer 2

动态导入

要添加到Bergi的答案中，请注意，在动态导入的情况下，由于返回的模块是对象，因此可以使用解构赋值来导入它：

(async function () {
  const { default: { foo, bar } } = await import('./export-file.js');
  console.log(foo, bar);
})();

为什么行得通

import在不同的上下文中有很大不同。在模块的开头以import ... from ... 格式使用时，它是static import，具有Bergi答案中讨论的局限性。

在程序内部以import('./filename.js')形式使用时，它被视为dynamic import。动态导入的操作与解析对象的功能非常相似（作为命名导出和默认导出的组合，默认导出已分配给default属性），并且可以如此进行结构分解。

以提问者为例，await import('./export-file.js')将解决：

{
  default: {
    foo: ...,
    bar: function bar() {...}
  }
}

在这里，您可以仅使用nested destructuring直接分配foo和bar：

const { default: { foo, bar } } = await import('./export-file.js');

解构默认导出对象

2 个答案:

动态导入

为什么行得通