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

Question

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

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

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

Answer 1

您几乎应该总是青睐命名导出，默认导出有很多缺点

默认导出的问题：

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

查看这些文章以获得更详细的解释：

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

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

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

Answer 2

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

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

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

  import foo from "./foo";
  

  ......但乔做到了

  import getFoo from "./foo";
  

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

  import { foo } from "./foo";
  

  ...（as getFoo如果需要避免冲突）。

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

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

Answer 3

一些差异可能会让您选择一个而不是另一个:

命名出口

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

默认导出

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

本文很好地解释了何时使用其中一个是个好主意.

Answer 4

第一种方法：-

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

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

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

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

Answer 5

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

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

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

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

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

import React, {Component} from 'react';

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

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