如何正确使用 index.js 文件

Index.js 文件与 index.html 文件类似，如果没有提供任何说明，则目录指向其索引文件。索引文件与 JavaScript 或 TypeScript 等价。
为了方便起见，我们将index.js在本文中使用它作为示例。
这意味着，如果你有一个目录

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

如果你指向demo目录，它将指向demo/index.js

看起来很简洁，
如果使用得当，它可以帮助保持代码库清洁，
但如果在任何地方都随意使用，它将损害可读性和可访问性。

“好事太多也可能变成坏事。”
——威廉·达德利

这些是 index.js 文件的一些常见错误实现及其解决方案，

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

演示/index.js

export const num = 100;

您想通过指向演示目录来访问 index.js 文件的内容，这将起作用。

import num from './demo';

这是 index.js 文件最糟糕的实现。
它有什么问题？

多个同名文件
通过查看 index.js 文件的名称，很难说出哪个 index.js 文件做什么
无法直接访问文件，因为demo它是一个目录，demo/index.js并且demo指向同一个目标，人们可能会在整个项目中搜索演示文件，但它不会显示，因为逻辑在demo/index.js文件中

如果文件夹只包含一个文件，则无需使用目录，直接使用文件即可。
这种情况的解决方案是：

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

演示.js

export const num = 100;

上述导入仍然有效，现在您可以直接搜索文件。

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

演示/index.js

import React from 'react';

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

export default SomeComponent;

现在，由于该组件是默认导出的，我可以用任何名称导入该组件，在这个组件中我将其导入为Demo。

现在，我可以像这样导入组件。

import Demo from './demo';

Demo 组件是一个有效的组件，但是如果我在我的项目中搜索 Demo 组件，我将找不到任何组件，如果我搜索演示文件，也将找不到任何演示文件。

这个问题可以通过仅使用 index.js 文件导出来解决。
例如：

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

演示/Demo.jsx

import React from 'react';

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

export default SomeComponent;

PS：这仅用于示例目的，请保持文件名和组件名称相同以避免混淆。

现在上述导入仍然有效

import Demo from './demo';

在这种情况下，按组件名称搜索仍然不起作用，但我们至少可以通过文件名搜索。

您可以使用 index.js 文件进行导出和默认导出。

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

演示/file1.js

export const str1 = 'file1';

demo/file2.js

export const str2 = 'file2';

演示/file3.js

export const str3 = 'file3';

演示/Demo.js

import React from 'react';

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

export default SomeComponent;

最后是 index.js 文件

index.js

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

前三个示例正在执行导出，
第三个示例在导出时为导出设置别名，
第四个示例将默认导出导出为 Demo 组件，这也是此 index.js 文件的默认值

您还可以将其他文件的默认导出导出为普通文件，如下所示

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

您也可以像这样进行默认导出

export default str = 'inexFileName';

'./demo'现在我们可以从位置导入所有这些出口

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