Question

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

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

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

Answer 1

可能会让您选择其中一种的差异：

命名导出

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

默认导出

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

This article很好地解释了何时使用一个而不是另一个。

Answer 2

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

// 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 = () => {}

您还可以为命名导入别名，在导入命名导出时为其命名，以解决命名冲突，或者为导出指定更多信息。

import MyComponent as MainComponent from "./MyComponent";

您还可以将所有命名的导出导入到对象上

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

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

// import

import MyDefaultComponent from "./MyDefaultExport";

// export

const MyComponent = () => {}

export default MyComponent;

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

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

Answer 3

这在某种程度上是一个见仁见智的问题，但是有一些客观方面：

模块中只能有一个默认导出，而您可以根据需要选择任意数量的命名导出。
如果提供默认导出，则使用该默认导出的程序员必须提供一个名称。这可能会导致代码库中Mary所做的不一致
```
import foo from "./foo";
```
...但是乔做
```
import getFoo from "./foo";
```
相反，使用命名导出，程序员不必考虑调用什么，除非与模块中的另一个标识符发生冲突。只是
```
import { foo } from "./foo";
```
...（（如有必要，请使用as getFoo以避免冲突）。
使用已命名的导出，导入人员必须指定要导入的名称，这意味着如果他们尝试导入不存在的内容，则会得到一个很好的早期错误。
如果您始终仅使用命名导出，那么从项目中的模块导入的程序员不必考虑他们想要的是默认导出还是命名导出。

Answer 4

没有任何明确的规则，但人们会使用一些约定来更轻松地构建或共享代码。

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

例如，在反应中，React是默认导出，因为这通常是您需要的唯一部分。您永远不会Component，因此您可以在需要时导入指定的导出。

import React, {Component} from 'react';

在一个模块具有多个相等（或大致相等）的出口的其他情况下，使用命名导出更好

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

Answer 5

第一种方法：-

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

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

第二种方法：-

export default foo;  //used in one file

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

第三种方法：-

export = foo;

import * as foo from 'blah';

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

//所有导出方法

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

//所有导入方法

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

有关更多信息，请访问Default keyword explaination

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

因此，每当我们仅导出1个函数时，最好在导出时使用default关键字

Answer 6

消除混淆的最简单定义

首先让我们了解导出方法，以便我们分析自己何时使用什么，或者我们为什么要这样做。

命名导出：每个模块一个或多个导出。当一个模块中有多个导出时，在导入时必须重新构造每个命名的导出。因为在同一个模块中可能有一个导出，除非我们提到它，否则编译器不会知道需要哪一个。

//Named export , exporting:

export const xyz = () =>{
}

// while importing this
import {xyx} from 'path'
or
const {xyz} = require(path)

大括号只是重组导出对象。

另一方面，默认导出每个模块只有一个导出，因此它们非常简单。

//exporting default

const xyz =() >{
};

export default xyz

//Importing
import xyz from 'path'

or

const xyz = require(path)

我希望这很容易理解，现在您可以理解为什么要在大括号内导入 React 模块了...

Answer 7

你应该几乎总是喜欢命名导出，默认导出有很多缺点

默认导出的问题：

难以重构或确保一致性，因为它们可以在代码库中命名为除实际名称以外的任何名称
难以通过自动化工具进行分析或提供代码智能感知和自动完成
它们打破了 treeShaking 的做法，因为不是导入您想要使用的单个函数，而是强制 webpack 导入整个文件以及它所具有的任何其他死代码，从而导致更大的包大小
每个文件只能导出一个以上的导出
您无法更快/直接访问导入

见：

https://blog.neufund.org/why-we-have-banned-default-exports-and-you-should-do-the-same-d51fdc2cf2a

https://humanwhocodes.com/blog/2019/01/stop-using-default-exports-javascript-module/

https://rajeshnaroth.medium.com/avoid-es6-default-exports-a24142978a7a

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

7 个答案: