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

时间:2017-12-18 19:02:29

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

对于这样的情况, /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,但这会导致编译错误

2 个答案:

答案 0 :(得分:1)

我发现因为我只添加了 ONE 导入&导出index.js。但如果我添加多个罚款! 例如,如果我这样做

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

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

然后linting规则将通过!

答案 1 :(得分:0)

  

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

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

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