Javascript `export const`vs.ES6中的`export default`

我正在尝试确定这两者之间是否有任何大的区别，除了通过执行以下操作可以使用

导出默认值导入之外：

import myItem from 'myItem';

使用
export const
我可以：

import { myItem } from 'myItem';

除此之外，还有什么区别和/或用例吗？
来自：

命名导出可用于导出多个值。在导入过程中，可以使用相同的名称来引用相应的值

关于默认导出，每个模块只有一个默认导出。默认导出可以是函数、类、对象或任何其他内容。该值将被视为“主要”导出值，因为它是最容易导入的

它是命名导出与默认导出<代码>导出常量

是导出常量声明的命名导出

要强调的是：这里重要的是用于声明const声明的关键字as<代码>导出也可以应用于其他声明，例如类或函数声明

默认导出（

导出默认值）

）

每个文件可以有一个默认导出。导入时，必须指定名称并按如下方式导入：

import MyDefaultExport from "./MyFileWithADefaultExport";

你可以给这个取任何你喜欢的名字

命名导出（

导出

）

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

// 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

注释

• 语法倾向于使用更简洁的默认导出，因为它们的用例更常见（）
• 默认导出实际上是名为

  default

  的命名导出，因此您可以使用命名导入进行导入：

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

---

请注意，当您从默认导出导入时，命名完全独立。这实际上会对重构产生影响
假设您有这样一个类

Foo

，并具有相应的导入：

export default class Foo { }

// The name 'Foo' could be anything, since it's just an
// Identifier for the default export
import Foo from './Foo'

现在，如果您将

Foo

类重构为

Bar

，并重命名该文件，大多数IDE将不会影响您的导入。因此，您将以以下方式结束：

export default class Bar { }

// The name 'Foo' could be anything, since it's just an
// Identifier for the default export.
import Foo from './Bar'

特别是在TypeScript中，我非常欣赏命名导出和更可靠的重构。区别在于缺少

default

关键字和大括号。顺便说一句，由于您现在已经进行了类型检查，因此还可以防止您在导入中输入错误

export class Foo { }

//'Foo' needs to be the class name. The import will be refactored
//in case of a rename!
import { Foo } from './Foo'

---

当您设置默认值时，它被称为默认导出。每个文件只能有一个默认导出，并且可以使用所需的任何名称将其导入到另一个文件中。如果不使用名为“导出”的默认值，则必须将其导入到另一个文件中，该文件使用相同的名称并在其中使用大括号。
在导入导出的“东西”时，允许导入导出的任何内容时，通过在

导入

本身中选择名称，会影响语法，无论导出时它的名称是什么，仅仅因为它被标记为“默认”
我喜欢（并且使用）的一个有用的用例是，允许导出匿名函数，而不必显式地给它命名，并且只有在导入该函数时，才必须给它命名：

---

导出两个函数，一个是默认值：

---

当使用

{}

语法导入函数（或变量）时，这意味着导入的内容在导出时已命名，因此必须以确切的相同名称导入，否则导入将无法工作

---

错误的例子：
• 默认函数必须首先导入

  import {divide}, square from './module_1.js
  

• divide_1

  未在

  module_1.js

  中导出，因此不会导入任何内容

  import {divide_1} from './module_1.js
  

• square

  未在

  module_1.js

  中导出，因为

  {}

  告诉引擎仅显式搜索名为的导出

  import {square} from './module_1.js
  

---

我遇到了浏览器无法使用的问题
我已经用以下方法修复了它：

 <script type="module" src="index.js"></script>

---

然后它应该可以工作。
更重要的区别是：

导出默认值

导出值，而

导出常量

/

导出变量

/

导出let

导出引用（或称为实时绑定）。在nodejs中尝试以下代码（默认情况下使用版本13或更高版本启用es模块）：

//a.mjs
导出let x=5；
//或
//设x=5；
//导出{x}
设置间隔（（）=>{
x++；
}, 1000);
导出默认x；

//index.mjs
从'/1.mjs'导入y，{x}；
设置间隔（（）=>{
控制台日志（y，x）；
}, 1000);

#安装节点13或更高版本
node./index.mjs

我们应该得到以下输出：

6 5
7 5
8 5
...
...

为什么我们需要这种差异 很可能，

导出默认值

用于commonjs

模块的兼容性。导出

如何使用bundler（汇总、网页包）实现这一点 对于上面的代码，我们使用rollup绑定

rollup./index.mjs--dir build

以及构建输出：

// build/index.js

let x = 5;
// or
// let x = 5;
// export { x }

setInterval(() => {
  x++;
}, 1000);

var y = x;

setInterval(() => {
  console.log(y, x);
}, 1000);

请注意

var y=x

语句，这是

默认值

webpack具有类似的生成输出。当大量模块添加到构建中时，连接文本是不可持续的，绑定程序将使用

Object.defineProperty

实现绑定（或在webpack中称为和谐导出）。请在以下代码中查找详细信息：

main.js
...
/******///定义协调导出的getter函数
/******/\uuuu webpack\u require\uuuuu.d=函数（导出、名称、getter）{
/******/如果（！\uuuu网页需要（导出，名称））{
/******/defineProperty（导出，名称，{enumerable:true，get:getter}）；
/******/        }
/*
export const bla = [1,2,3];

import {bla} from './example.js';

6 5
7 5
8 5
...
...

// build/index.js

let x = 5;
// or
// let x = 5;
// export { x }

setInterval(() => {
  x++;
}, 1000);

var y = x;

setInterval(() => {
  console.log(y, x);
}, 1000);