如何在不破坏react-refresh的情况下使用索引（桶）文件？

Question

假设我有一个模块

foo

，里面有一些东西：

// foo/index.js
export { default as SomeComponent } from './SomeComponent'
export { someUtil } from './utilities'
export const SOME_CONSTANT = 42

现在我可以直接从

foo

导入我需要的所有内容，而无需查看有关哪个文件所在的实现细节：

// bar.js
import { SomeComponent, someUtil, SOME_CONSTANT } from 'foo'

所以我做到了，这很好。

但现在我从

react-refresh/only-export-components

规则中收到 eslint 错误，警告我“快速刷新仅在文件仅导出组件时有效”。好的，

index.js

确实导出组件和其他内容（函数、常量）。这条规则是否意味着我的

foo

模块/包基本上无法有效地使用索引文件 - 即组件或其他内容必须直接从使用它们的地方导入？

// bar.js
import { SOME_CONSTANT, someUtil } from 'foo'
import SomeComponent from 'foo/SomeComponent'

我理解这里的

react-refresh

规则吗？如果是这样，不破坏模块级导出的推荐模式是什么？

Answer 1

React 快速刷新需要一种清晰的方法来检测哪些文件用于组件。要解决此问题，请将导出分成两个文件 -

1. foo/components.js

   文件 - 用于组件导出

2. foo/index.js

   - 用于实用程序和常量导出。

此方法遵循

react-refresh/only-export-components

规则并允许项目扩展。它可以保持物品清洁并避免日后出现麻烦。

// foo/components.js
export { default as SomeComponent } from './SomeComponent';

.

// foo/index.js
export { someUtil } from './utilities';
export const SOME_CONSTANT = 42;

导入：

import { SomeComponent } from 'foo/components';
import { someUtil, SOME_CONSTANT } from 'foo';