javascript 为什么以及何时在 es6 模块中使用默认导出而不是命名导出？

Why and when to use default export over named exports in es6 Modules?

提问by vbharath

I have referred all the questions in stackoverflow. But none of the suggested why and when to use default export.

我已经提到了stackoverflow中的所有问题。但是没有建议为什么以及何时使用默认导出。

I just saw that default can be metioned "When there is only one export in a file"

我刚刚看到可以提到默认值“当文件中只有一个导出时”

Any other reason for using default export in es6 modules?

在 es6 模块中使用默认导出的任何其他原因？

回答by Ben

Some differences that might make you choose one over the other:

一些差异可能会让您选择其中之一：

Named Exports

命名出口

• Can export multiple values
• MUST use the exported name when importing

• 可以导出多个值
• 导入时必须使用导出的名称

Default Exports

默认导出

• Export a single value
• Can use any name when importing

• 导出单个值
• 导入时可以使用任何名称

This articledoes a nice job of explaining when it would be a good idea to use one over the other.

这篇文章很好地解释了何时使用一个而不是另一个是个好主意。

回答by Afaq Ahmed Khan

With named exports, one can have multiple named exports per file. Then import the specific exports they want surrounded in braces. The name of imported module has to be the same as the name of the exported module.

使用命名导出，一个文件可以有多个命名导出。然后导入他们想要用大括号括起来的特定导出。导入模块的名称必须与导出模块的名称相同。

// imports
// ex. importing a single named export
import { MyComponent } from "./MyComponent";

// ex. importing multiple named exports
import { MyComponent, MyComponent2 } from "./MyComponent";

// ex. giving a named import a different name by using "as":
import { MyComponent2 as MyNewComponent } from "./MyComponent";

// exports from ./MyComponent.js file
export const MyComponent = () => {}
export const MyComponent2 = () => {}

You can also alias named imports, assign a new name to a named export as you import it, allowing you to resolve naming collisions, or give the export a more informative name.

您还可以为命名导入设置别名，在导入时为命名导出指定一个新名称，允许您解决命名冲突，或者为导出提供一个更具信息性的名称。

import MyComponent as MainComponent from "./MyComponent";

You can also Import all the named exports onto an object:

您还可以将所有命名的导出导入到一个对象中：

import * as MainComponents from "./MyComponent";
// use MainComponents.MyComponent and MainComponents.MyComponent2 here

One can have only one default export per file. When we import we have to specify a name and import like:

每个文件只能有一个默认导出。当我们导入时，我们必须指定一个名称并导入如下：

// import

import MyDefaultComponent from "./MyDefaultExport";

// export

const MyComponent = () => {}

export default MyComponent;

The naming of import is completely independent in default export and we can use any name we like.

导入的命名在默认导出中是完全独立的，我们可以使用任何我们喜欢的名称。

From MDN: 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.

来自MDN： 命名导出对于导出多个值很有用。在导入过程中，可以使用相同的名称来引用相应的值。关于默认导出，每个模块只有一个默认导出。默认导出可以是函数、类、对象或其他任何东西。该值将被视为“主要”导出值，因为它是最容易导入的。

回答by VIKAS KOHLI

1st Method:-

第一种方法：-

export foo; //so that this can be used in other file

import {foo} from 'abc'; //importing data/fun from module

2nd Method:-

第二种方法：-

export default foo;  //used in one file

import foo from 'blah'; //importing data/fun from module

3rd Method:-

第三种方法：-

export = foo;

import * as foo from 'blah';

The above methods roughly compile to the following syntax below:-

上述方法大致编译为以下语法：-

//all export methods

//所有导出方法

exports.foo = foo; //1st method
exports['default'] = foo; //2nd method
module.exports = foo; //3rd method

//all import methods

//所有导入方法

var foo = require('abc').foo; //1st method
var foo = require('abc')['default']; //2nd method
var foo = require('abc'); //3rd method

For more information, visit to Default keyword explaination

有关更多信息，请访问默认关键字解释

Note:- There can be only oneexport defaultin onefile.

注意：- 只能在文件中one导出。defaultone

So whenever we are exporting only 1 function, then it's better to use defaultkeyword while exporting

所以每当我们只导出 1 个函数时，最好default在导出时使用关键字

回答by T.J. Crowder

It's somewhat a matter of opinion, but there are some objective aspects to it:

这有点见仁见智，但也有一些客观的方面：

• You can have only one default export in a module, whereas you can have as many named exports as you like.

• If you provide a default export, the programmer using it has to come up with a name for it. This can lead to inconsistency in a codebase, where Mary does

  import foo from "./foo";
  

  ...but Joe does

  import getFoo from "./foo";
  

  In constrast, with a named export, the programmer doesn't have to think about what to call it unless there's a conflict with another identifier in their module. It's just

  import { foo } from "./foo";
  

  ...(with an as getFooif necessary to avoid a conflict).

• With a named export, the person importing it has to specify the name of what they're importing, which means they get a nice early error if they try to import something that doesn't exist.

• If you consistentlyonly use named exports, programmers importing from modules in the project don't have to think about whether what they want is the default or a named export.

• 一个模块中只能有一个默认导出，而您可以拥有任意数量的命名导出。

• 如果您提供默认导出，则使用它的程序员必须为其命名。这可能会导致代码库中的不一致，而 Mary 所做的

  import foo from "./foo";
  

  ......但乔做到了

  import getFoo from "./foo";
  

  相反，对于命名导出，除非与模块中的另一个标识符发生冲突，否则程序员不必考虑如何调用它。只是

  import { foo } from "./foo";
  

  ...（as getFoo如果有必要使用一个以避免冲突）。

• 对于命名导出，导入它的人必须指定他们正在导入的名称，这意味着如果他们尝试导入不存在的东西，他们会得到一个很好的早期错误。

• 如果您始终只使用命名导出，那么从项目中的模块导入的程序员不必考虑他们想要的是默认导出还是命名导出。

回答by Vinno97

There aren't any definitive rules, but there are some conventions that people use to make it easier to structure or share code.

没有任何明确的规则，但人们使用一些约定来简化代码的结构或共享。

When there is only one export in the entire file, there is no reason to make it named. Also, when your module has one main purpose, it could make sense to make that your default export. In those cases you can extra named exports

当整个文件中只有一个导出时，没有理由让它命名。此外，当您的模块有一个主要用途时，将其设为默认导出是有意义的。在这些情况下，您可以额外命名导出

In react for example, Reactis the default export, since that is often the only part that you need. You don't always Component, so that's a named export that you can import when needed.

例如，在 react 中，React是默认导出，因为这通常是您唯一需要的部分。你并不总是Component，所以这是一个命名的导出，你可以在需要时导入。

import React, {Component} from 'react';

In the other cases where one module has multiple equal (or mostly equal) exports, it's better to use named exports

在其他情况下，一个模块有多个相等（或几乎相等）的导出，最好使用命名导出

import { blue, red, green } from 'colors';