在将index.js用于导出时，如何解决airbnb eslint import / prefer-default-export规则

Posted 2021-04-08

对于像这样的情况，/ACollectionOfTinyComponent/index.js

import Container from './Container';
export {
  Container,
};

因此index.js成为一个包含其他小部件的目录，而不必一直写出每个组件名称。所以在这种情况下，我们可以在另一个组件中导入一个组件，如下所示：

import {Container} from './ACollectionOfTinyComponent'

//then use Container in the code here

这是一种不好的做法吗？因为如果我有airbnb linter启用，那么我得到错误linting

Prefer default export import/prefer-default-export

它要求我添加default，但这将导致编译错误

答案

我发现，因为我只为index.js添加了一个导入和导出。但如果我添加多个罚款！例如，如果我这样做

import Container from './Container';
import Ezeewei from './Ezeewei';
export {
  Container,
  Ezeewei,
};

请注意，我添加了一个Ezeewei导入。

然后linting规则将通过！

另一答案

它要求我添加默认值，但这将导致编译错误

您必须使用错误的语法导出默认值。

export { name1 as default, … };

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export#Syntax

import {Container} ......这是一种不好的做法吗？

是。如果组件中有一个入口点（如类），则应将其导出为默认导出而不是命名导出。该语言的设计者给出了默认的导入和导出特殊语法，以将其作为主要用例进行推广。

http://2ality.com/2014/09/es6-modules-final.html#default-exports-are-favored