JavaScript / TypeScriptのディレクトリからデフォルトでエクスポートする方法

1
2022.01.13

私は次のdir構造を持っています

- common
|
|--- Component1
|   |
|   |--- index.js
|   |--- Component1.tsx
|   |--- Component1.scss
|
|--- Component2.tsx
|

コンポーネント1の index.js とCompoennt1.tsxでは、デフォルトをエクスポートします

コンポーネント1/インデックス.js

export { default as Component1 } from './Component1'

コンポーネント1/コンポーネント1.tsx

const Component1 = () => { code... }

export default Component1

Component2.tsxでは、既定のインポートを使用してComponent1.tsxをインポートします。しかし、それは「/Component1/indexにデフォルトのエクスポートはありません」と不平を言います。ディレクトリ/Compoennt1はデフォルトとしてComponent1.tsxをエクスポートしていると思いますが、動作していません

コンポーネント2.tsx

// doesn't work
import Component1 from './Component1'

// both works
import { Component1 } from './Component1' or
import Component1 from './Component1/Component1'

フォルダを通じてエクスポート/インポートがデフォルトにできない理由や、インポート/エクスポートの仕組みを説明できますか?

回答
3
2022.01.13

ここでは、既定のエクスポートではなく、名前付きエクスポート (Component1という名前) です。

export { default as Component1 } from './Component1'

名前付きインポートを介してインポートする理由は、ここで動作します。

import { Component1 } from './Component1'

Component1/index.jsのデフォルトのエクスポートにする場合は、

export { default as default} from './Component1'

個人的には、コードを書くときに一貫性を保つのが好きです - すべてのモジュールについて、「このモジュールはデフォルトまたは名前の付いたものをエクスポートしましたか?特定のプロジェクトでは、どこでも既定のエクスポートを使用する方が簡単な場合や、すべての場所で名前付きエクスポートを使用できますが、混在させないようにすることができます。