インデックスの使い方.JSファイル(適切)

インデックス.JSファイルはインデックスと同じです.HTMLファイル、指定されていない場合、ディレクトリはインデックスファイルを指します.インデックスファイルはJavaScriptやTypesScriptなら問題ではありません.
利便性のために我々は使用しますindex.js この記事の例として.
ディレクトリがある場合

📦demo  
 ┣ 📜file1.js  
 ┣ 📜file2.js  
 ┣ 📜file3.js  
 ┗ 📜index.js

あなたが指すならばdemo ディレクトリにはdemo/index.jsかなりきれいです.
プロパティを使用するとCodeBaseをきれいに保つことができます.
しかし、不注意に至る所で使用されるならば、それは読みやすさとアクセシビリティの両方を妨げます.

"Too much of a good thing can be a bad thing,"
- William Dudley

これらはインデックスの一般的な悪い実装です.JSファイルとその解決方法

#### ディレクトリにインデックスファイルがある場合

 ┣ 📂demo  
 ┃ ┗ 📜index.js  
 ┣ 📂demo1  
 ┃ ┗ 📜index.js  
 ┣ 📂demo2  
 ┃ ┗ 📜index.js  
 ┗ 📂demo3  
 ┃ ┗ 📜index.js

インデックス.js

export const num = 100;

インデックスの内容にアクセスします.JSファイルは、それが動作するデモディレクトリを指すことによって.

import num from './demo';

これはインデックスの最悪の実装です.jsファイル.
何が問題ですか.

複数の同じ名前ファイル

インデックスの名前を見てください.JSファイルのインデックスを言うのは難しいです.jsファイル

ファイルに直接アクセスできませんdemo ディレクトリとdemo/index.js and demo ポイントは、同じ宛先には、1つのプロジェクトを通してデモファイルを検索することがありますし、それはロジックがあるので表示されませんdemo/index.js ファイル

フォルダが1つのファイルだけを含むならば、ディレクトリを使用する必要はなく、単独でファイルを使用してください.
この場合の解決策はです.

 ┣ 📜demo.js  
 ┣ 📜demo1.js  
 ┣ 📜demo2.js  
 ┗ 📜demo3.js

デモ.js

export const num = 100;

上記のインポートはまだ動作し、今は直接ファイルを検索することができます.

#### インデックスファイルにコンポーネントを書くのは別の悪用です.

📦demo  
 ┣ 📜file1.js  
 ┣ 📜file2.js  
 ┣ 📜file3.js  
 ┗ 📜index.js

インデックス.js

import React from 'react';

const SomeComponent = () => {
  return <div>some Component</div>;
};

export default SomeComponent;

コンポーネントがデフォルトのエクスポートであるため、コンポーネントを任意の名前でインポートできますDemo .
今、私はこのようなコンポーネントをインポートできます.

import Demo from './demo';

デモコンポーネントは有効なコンポーネントですが、もし私のプロジェクトのデモコンポーネントを検索しない場合は、私はデモファイルを検索する場合は、任意のデモファイルを見つけることはありません.
これはインデックスを使用して解決できます.JSファイルのみエクスポートします.
EG :

📦demo  
 ┣ 📜Demo.jsx  
 ┣ 📜file1.js  
 ┣ 📜file2.js  
 ┣ 📜file3.js  
 ┗ 📜index.js

デモ/デモ.日本学術振興会

import React from 'react';

const SomeComponent = () => {
  return <div>some Component</div>;
};

export default SomeComponent;

ps :例のみの目的で与えられ、ファイル名とコンポーネント名を同じにして混乱を避ける.
今、上記のインポートはまだ動作します

import Demo from './demo';

この場合、コンポーネント名による検索はまだ動作しませんが、少なくともファイル名で検索できます.
インデックスを使用して両方のエクスポートおよびデフォルトのエクスポートを行うことができます.jsファイル.

📦demo  
 ┣ 📜Demo.jsx  
 ┣ 📜file1.js  
 ┣ 📜file2.js  
 ┣ 📜file3.js  
 ┗ 📜index.js

デモ/ファイル1 .js

export const str1 = 'file1';

デモ/ファイル2 .js

export const str2 = 'file2';

デモ/ファイル3 .js

export const str3 = 'file3';

デモ/デモ.js

import React from 'react';

const SomeComponent = () => {
  return <div>some Component</div>;
};

export default SomeComponent;

最後にインデックス.jsファイル
インデックス.js

export { str1 } from './file1';
export { str2 } from './file2';
export { str3 as customExport } from './file3';
export { default } from './Demo';

最初の3つの例は輸出を行っている
第3の1つは、エクスポート中にエクスポートをエイリアシングです
番目の1つのデモコンポーネントとしてデフォルトのエクスポートをエクスポートし、それはまた、このインデックスのためのdefultです.jsファイル
また、このような通常のファイルとして他のファイルのデフォルトのエクスポートをエクスポートすることができます

export { default as NormalExport } from './Demo';

このようにデフォルトのエクスポートを行うこともできます

export default str = 'inexFileName';

今、我々はこれらのすべての輸出をインポートすることができます'./demo' ロケーション

import str, { str1, str2, customExport, NormalExport } from './demo';