react-native - 使用 babel-module-resolver 从单个文件导出时出现循环依赖问题

Question

我正在研究一个 native 项目，并且在执行热重载应用程序时进入循环递归，导致超过最大调用堆栈。有关此问题的更多详细信息，请访问 here

从这里我意识到有问题并且正在创建循环依赖项。

我决定给 madge尝试看看项目中发生了什么。运行命令后，我看到了很多循环依赖。

现在，由于我的项目非常庞大，调试是一项艰巨的任务，因此我创建了一个包含单个文件夹的项目的小版本。

我创建了一个 utils 文件夹，其中有 4 个文件:-

utils/index.js

utils/device-helper.js

utils/init.js

index.js

对于进口，我使用 babel-module-resolver
utils/init.js

import {deviceInfo} from "utils";

export const init = () => {
  // initialising app and calling backend API with device info
};

utils/device-helper.js

import DeviceInfo from "react-native-device-info";

const API_LEVEL = "v0";

export const deviceInfo = () => {
  try {
    return Object.assign({}, {
      apiLevel: API_LEVEL,
      deviceId: DeviceInfo.getUniqueID(),
      device: DeviceInfo.getDeviceName(),
      model: DeviceInfo.getModel(),
      osVersion: DeviceInfo.getSystemVersion(),
      product: DeviceInfo.getBrand(),
      country: DeviceInfo.getDeviceCountry(),
      appVersion: DeviceInfo.getVersion(),
      manufacturer: DeviceInfo.getManufacturer(),
      userAgent: DeviceInfo.getUserAgent(),
      buildNumber: DeviceInfo.getBuildNumber(),
      bundleId: DeviceInfo.getBundleId()
    });
  } catch (e) {
    //  TODO: Report to Bugsnag
    return {};
  }
};

utils/index.js

export * from "./init";
export * from "./device-info-helper";

index.js

export * from "./utils"; 

运行后 madge我得到以下命令:-

tests-MBP:madge-test harkirat$ madge --circular  index.js
Processed 4 files (684ms)

✖ Found 1 circular dependency!

1) utils/index.js > utils/init.js

但是，如果我将 utils/init.js 更改为遵循它的工作原理:-

utils/init.js

import {deviceInfo} from "./device-helpers";


export const init = () => {
  // initialising app and calling backend API with device info
};

我无法理解这种循环依赖的原因。有人可以帮忙吗？

Here是存储库的链接。

Answer 1

我没有看到 .babelrc在 repo 中，但这是我的想法:

在 utils/init.js您使用以下方式导入:

import {deviceInfo} from "utils";
这与:
import {deviceInfo} from "./utils/index";

在 utils/index.js你做一个 export * from "./init" .此 export from基本上是先导入./utils/init的所有内容然后再导出。

所以:

utils/init.js从 ./utils/index 进口

./utils/index.js从 ./utils/init 进口

有你的循环依赖。