react项目中的ES6循环依赖

Question

我刚刚使用 react native 建立了一个小测试项目。这对我来说是全新的（包括 ECMAScript 6）。 Eslint 告诉我一些关于“循环依赖”的事情，我不知道如何解决这个问题。代码仍然有效。

我的 package.json：

...
"dependencies": {
    "axios": "^0.19.0",
    "node-sass": "^4.12.0",
    "react": "16.8.3",
    "react-native": "0.59.9",
    "react-navigation": "^3.11.0"
},
"devDependencies": {
    "@babel/core": "7.4.5",
    "@babel/runtime": "7.4.5",
    "babel-eslint": "^10.0.1",
    "babel-jest": "24.8.0",
    "babel-plugin-module-resolver": "^3.2.0",
    "eslint": "^5.16.0",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-import-resolver-babel-module": "^5.1.0",
    "eslint-plugin-import": "^2.17.3",
    "eslint-plugin-jsx-a11y": "^6.2.1",
    "eslint-plugin-react": "^7.13.0",
    "jest": "24.8.0",
    "metro-react-native-babel-preset": "0.54.1",
    "react-dom": "^16.8.6",
    "react-test-renderer": "16.8.3"
},
...

---

src/index.jsx 是主要的 JSX 文件：

import { Comp1 } from 'components';
...

---

我创建了一个src/components/index.jsx 来启用类似的导入

import { Comp1, Comp2, Comp3 } from 'components'

而不是

import { Comp1 } from 'components/comp1';
import { Comp2 } from 'components/comp2';
import { Comp3 } from 'components/comp3';

文件src/components/index.jsx 看起来像：

export * from './button';
export * from './comp1';
...

---

src/components/button/index.jsx:

import React from 'react';
import {
  Text,
  TouchableOpacity
} from 'react-native';
import style from './style';

const Button = ({ onPress, children }) => {
  const {
    buttonStyle,
    textStyle
  } = style;

  return (
    <TouchableOpacity onPress={onPress} style={buttonStyle}>
      <Text style={textStyle}>
        {children}
      </Text>
    </TouchableOpacity>
  );
};

export default Button;
export { Button };

---

src/components/comp1/index.jsx:

import React from 'react';
import {
  Text,
  View
} from 'react-native';
import { Button } from 'components';
import style from './style';

const Comp1 = (props) => {
  const {
    textStyle,
    viewStyle
  } = style;

  return (
    <View style={viewStyle}>
      <Text style={textStyle}>some text</Text>
      <Button>Test</Button>
    </View>
  );
};

export default Comp1;
export { Comp1 };

运行此设置会产生 eslint 错误 import/no-cycle。代码本身有效。

如果我将src/components/comp1/index.jsx 中的import { Button } from 'components' 更改为import { Button } from 'components/button'，则会弹出no eslint 错误。

我想使用上面描述的这种简短的导入语法，而不会失去在彼此内部使用模块的可能性。有什么办法吗？

Answer 1

您的结构是在components/index.jsx 和comp1/index.jsx （以及其他你有同样东西的地方）之间建立了一个循环依赖关系。 comp1/index.jsx 从 components/index.jsx 导入，从 comp1/index.jsx 导入。

实际本机 ESM¹ 模块和 CJS² 或类似模块之间的周期运行时处理不同。两者都需要仔细处理周期，但它们的行为方式略有不同。如果您在捆绑器或类似工具中将 ESM 转换为 CJS，这可能会特别令人困惑。

当两个模块之间存在循环依赖关系时（为了简单起见），这意味着在某些时候两个模块中的一个将在另一个之前运行，这意味着它从另一个模块获取的任何导入都将被未初始化 (ESM)或尚未定义（CJS）。因此，两个模块之一中的 顶级代码 不能依赖现有的导入。在 ESM 中，尝试使用未初始化的导出会引发错误；在 CJS 中，导出的值只是 undefined。

在您的示例中，我不认为这是一个问题，因为循环中模块中的顶级代码不使用循环中其他模块的导入，它仅用于调用的函数中稍后（comp1/index.jsx 使用Button，但仅当Comp1 被调用，并且它不在顶层代码中调用。（过程可能比这更复杂，但是.. .)

如果代码经过测试并且工作正常，您可以使用configuration comments 为组件文件禁用该规则（如果它允许您这样做）。这样一来，您就可以在全局范围内保留规则，以防实际出现问题的周期，而不必为这些您已经测试并知道是好的周期而烦恼。

---

¹ ESM = ECMAScript Modules，真正的原生 JavaScript 模块，如果您仅使用 import，则可以进行静态分析和export 声明（不是import() 动态导入）。

² CJS = CommonJS，使用require 和exports 对象的动态模块结构。