ES6 круговая зависимость в реактивном проекте

Question

Я только что создал небольшой тестовый проект, использующий реагировать нативно. Это все новое для меня (включая ECMAScript 6). Эслинт рассказывает мне кое-что о «круговых зависимостях», и я не знаю, как решить эту проблему. Тем не менее код работает.

my 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 . Сам код работает.

Если я изменю import { Button } from 'components' в src/components/comp1/index.jsx на 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² или аналогичные (отсюда и правило). Так что правило предупреждает вас об этом.

Это не значит, что вы не можете сделать это с CJS, это просто означает, что (опять же) вам нужно немного позаботиться. CJS работает через объект exports, который динамически заполняется. Когда существует циклическая зависимость между двумя модулями (для простоты), это означает, что в какой-то момент один из двух модулей будет запущен раньше другого, что означает, что любой импорт, который он получает от другого, еще не будет определен. Таким образом, код верхнего уровня в одном из двух модулей не может полагаться на существующий импорт.

В вашем примере, я не ожидал бы, что это будет проблемой, потому что код верхнего уровня в модулях цикла не использует импорт из другого модуля в цикле, он используется только в функциях, называемых позже (comp1/index.jsx использует Button, но только когда Comp1 равен и называется , и он не вызывается в коде верхнего уровня. (Процесс может быть более сложным, чем это, но ... )

Если код протестирован и работает, вы можете использовать комментарии конфигурации , чтобы отключить это правило для файлов компонентов (если это позволяет вам сделать это). Это позволяет вам оставить правило включенным в глобальном масштабе в случае действительно проблемных циклов, но не беспокоиться об этих циклах, которые вы тестировали и знаете, что они хороши.

---

¹ ESM = E CMA S крипты M odules, подлинные собственные модули JavaScript, которые статически анализируются, если вы используете только import и export декларации (не import() динамический импорт).

² CJS = C ommon JS , структура динмического модуля с использованием require и объекта exports.