Javascript ES6 中的 `export const` 与 `export default`

`export const` vs. `export default` in ES6

提问by ajmajmajma

I am trying to determine if there is any big differences between these two, other than being able to import with export defaultby just doing:

我试图确定这两者之间是否有任何重大差异，除了能够通过以下方式导入export default：

import myItem from 'myItem';

And using export constI can do:

使用export const我可以做到：

import { myItem } from 'myItem';

I am wondering if there are any differences and/or use cases other than this.

我想知道除此之外是否还有任何差异和/或用例。

回答by David Sherret

It's a named export vs a default export. export constis a named export that exports a const declaration or declarations.

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

To emphasize: what matters here is the exportkeyword as constis used to declare a const declaration or declarations. exportmay also be applied to other declarations such as class or function declarations.

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

Default Export (export default)

默认导出 ( export default)

You can have one default export per file. When you import you have to specify a name and import like so:

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

import MyDefaultExport from "./MyFileWithADefaultExport";

You can give this any name you like.

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

Named Export (export)

命名导出 ( export)

With named exports, you can have multiple named exports per file. Then import the specific exports you want surrounded in braces:

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

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

Or it's possible to use a default along with named imports in the same statement:

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

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

Namespace Import

命名空间导入

It's also possible to import everything from the file on an object:

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

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

Notes

笔记

• The syntax favours default exports as slightly more concise because their use case is more common (See the discussion here).

• A default export is actually a named export with the name defaultso you are able to import it with a named import:

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

• 语法倾向于默认导出稍微简洁一点，因为它们的用例更常见（请参阅此处的讨论）。

• 默认导出实际上是具有名称的命名导出，default因此您可以使用命名导入来导入它：

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

回答by vsync

export defaultaffects the syntax when importing the exported "thing", when allowing to import, whatever has been exported, by choosing the name in the importitself, no matter what was the name when it was exported, simply because it's marked as the "default".

export default导入导出的“事物”时会影响语法，允许导入时，无论已导出的内容，通过在其import本身中选择名称，无论导出时的名称是什么，仅仅因为它被标记为“默认”。

A useful use case, which I like (and use), is allowing to export an anonymousfunction without explicitlyhaving to name it, and only when that function is imported, it must be given a name:

我喜欢（并使用）的一个有用的用例是允许导出匿名函数而无需显式命名它，并且只有在导入该函数时，才必须为其命名：

---

---

Example:

例子：

Export 2 functions, one is default:

导出2个函数，一个是default：

export function divide( x ){
    return x / 2;
}

// only one 'default' function may be exported and the rest (above) must be named
export default function( x ){  // <---- declared as a default function
    return x * x;
}

Import the above functions. Making up a name for the defaultone:

导入以上函数。为default一个人取一个名字：

// The default function should be the first to import (and named whatever)
import square, {divide} from './module_1.js'; // I named the default "square" 

console.log( square(2), divide(2) ); // 4, 1

---

---

When the {}syntax is used to import a function (or variable) it means that whatever is imported was alreadynamed when exported, so one must import it by the exactsame name, or else the import wouldn't work.

当{}语法用于导入函数（或变量）时，意味着导入的任何内容在导出时已经命名，因此必须以完全相同的名称导入它，否则导入将不起作用。

---

---

Erroneous Examples:

错误示例：

1. The default function must be first to import

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

2. divide_1was not exported in module_1.js, thus nothing will be imported

   import {divide_1} from './module_1.js
   

3. squarewas not exported in module_1.js, because {}tells the engine to explicitly search for namedexports only.

   import {square} from './module_1.js
   

1. 默认函数必须先导入

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

2. divide_1未导出module_1.js，因此不会导入任何内容

   import {divide_1} from './module_1.js
   

3. square未在 中导出module_1.js，因为{}告诉引擎仅显式搜索命名导出。

   import {square} from './module_1.js
   

回答by Philipp Sumi

Minor note: Please consider that when you import from a default export, the naming is completely independent. This actually has an impact on refactorings.

小注意：请注意，当您从默认导出导入时，命名是完全独立的。这实际上对重构有影响。

Let's say you have a class Foolike this with a corresponding import:

假设您有这样一个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'

Now if you refactor your Fooclass to be Barand also rename the file, most IDEs will NOT touch your import. So you will end up with this:

现在，如果你重构你的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'

Especially in Typescript, I really appreciate named exports and the more reliable refactoring. The difference is just the lack of the defaultkeyword and the curly braces. This btw also prevents you from making a typo in your import since you have type checking now.

特别是在 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'

回答by James Sumners

From the documentation:

从文档：

Named exports are useful to export several values. During the import, one will be able to use the same name to refer to the corresponding value.

Concerning the default export, there is only a single default export per module. A default export can be a function, a class, an object or anything else. This value is to be considered as the "main" exported value since it will be the simplest to import.

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

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

回答by Abdullah Danyal

When you put default, its called default export. You can only have one default export per file and you can import it in another file with any name you want. When you don't put default, its called named export, you have to import it in another file using the same name with curly braces inside it.

当您放置默认值时，它称为默认导出。每个文件只能有一个默认导出，您可以将其导入到另一个文件中，并使用您想要的任何名称。当您不放置默认值时，它称为命名导出，您必须使用相同的名称将其导入另一个文件中，并在其中使用花括号。

回答by Marcel Zebrowski

I had the problem that the browser doesn't use es6.

我遇到了浏览器不使用 es6 的问题。

I have fix it with:

我已经修复它：

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

The type module tells the browser to use ES6.

type 模块告诉浏览器使用 ES6。

export const bla = [1,2,3];

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

Then it should work.

那么它应该工作。