使用 index.js 进行导出时如何绕过 airbnb eslint 导入/首选默认导出规则答案

【问题标题】：How to get around airbnb eslint import/prefer-default-export rule when using index.js for exports使用 index.js 进行导出时如何绕过 airbnb eslint 导入/首选默认导出规则
【发布时间】：2018-06-01 04:06:20
【问题描述】：

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

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

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

import {Container} from './ACollectionOfTinyComponent'

//then use Container in the code here

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

的错误 linting

Prefer default export import/prefer-default-export

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

【问题讨论】：

标签： javascript import export eslint eslint-config-airbnb

【解决方案1】：

我发现这是因为我只为 index.js 添加了 ONE 导入和导出。但是，如果我添加多个就可以了！例如，如果我这样做

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

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

那么 linting 规则就会通过！

【讨论】：

【解决方案2】：

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

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

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

【讨论】：