javascript - `export const` 与 ES6 中的 `export default`

Question

我正在尝试确定这两者之间是否有任何重大差异，除了能够通过 export default 进行导入，只需执行以下操作:

import myItem from 'myItem';

使用 export const 我可以做到:

import { myItem } from 'myItem';

除此之外还有其他区别和/或用例吗？

Answer 1

这是一个命名导出与默认导出。 export const 是导出一个或多个 const 声明的命名导出。

强调:这里重要的是export关键字为 const用于声明一个或多个 const 声明。 export 也可以应用于其他声明，例如类或函数声明。

默认导出(导出默认)

每个文件可以有一个默认导出。导入时，您必须指定名称并像这样导入:

import MyDefaultExport from "./MyFileWithADefaultExport";

你可以给它起任何你喜欢的名字。

命名导出(export)

使用命名导出，每个文件可以有多个命名导出。然后导入您想要用大括号括起来的特定导出:

// ex. importing multiple exports:
import { MyClass, MyOtherClass } from "./MyClass";
// ex. giving a named import a different name by using "as":
import { MyClass2 as MyClass2Alias } from "./MyClass2";

// use MyClass, MyOtherClass, and MyClass2Alias here

或者可以在同一个语句中使用默认值和命名导入:

import MyDefaultExport, { MyClass, MyOtherClass} from "./MyClass";

命名空间导入

也可以从对象上的文件中导入所有内容:

import * as MyClasses from "./MyClass";
// use MyClasses.MyClass, MyClasses.MyOtherClass and MyClasses.default here

备注

• 语法倾向于使用更简洁的默认导出，因为它们的用例更常见 (See the discussion here)。

• 默认导出实际上是一个名为 default 的命名导出，因此您可以使用命名导入来导入它:

  import { default as MyDefaultExport } from "./MyFileWithADefaultExport";