ESrojects의 순환 종속성 문제 해결

Madge 및 ESLint를 사용하여 JavaScript 프로젝트에서 순환 종속성을 식별하고 수정하기 위한 가이드

TL;DR

• 프로젝트의 순환 종속성을 확인하려면 규칙과 함께 ESLint를 사용하는 것이 좋습니다.
• 빌드 대상이 ES5인 경우 모듈이 상수를 내보내면 다른 모듈을 가져와서는 안 됩니다.

문제 증상

프로젝트 실행 시 참조된 상수가 정의되지 않은 상태로 출력됩니다.

예: utils.js에서 내보낸 FOO를 index.js로 가져오고 해당 값이 정의되지 않은 것으로 인쇄됩니다.

// utils.js

// import other modules…
export const FOO = 'foo';

// ...

// index.js

import { FOO } from './utils.js';
// import other modules…

console.log(FOO); // `console.log` outputs `undefined`

// ...

경험에 따르면 이 문제는 index.js와 utils.js 간의 순환 종속성으로 인해 발생할 가능성이 높습니다.

다음 단계는 두 모듈 간의 순환 종속성 경로를 식별하여 가설을 검증하는 것입니다.

순환 종속성 찾기

Madge 도구 설치

커뮤니티에는 순환 종속성을 찾는 데 사용할 수 있는 다양한 도구가 있습니다. 여기서는 Madge를 예로 들어보겠습니다.

Madge는 모듈 종속성의 시각적 그래프를 생성하고, 순환 종속성을 찾고, 기타 유용한 정보를 제공하는 개발자 도구입니다.

1단계: Madge 구성

// madge.js
const madge = require("madge");
const path = require("path");
const fs = require("fs");
madge("./index.ts", {
  tsConfig: {
    compilerOptions: {
      paths: {
        // specify path aliases if using any
      },
    },
  },
})
  .then((res) => res.circular())
  .then((circular) => {
    if (circular.length > 0) {
      console.log("Found circular dependencies: ", circular);
      // save the result into a file
      const outputPath = path.join(__dirname, "circular-dependencies.json");
      fs.writeFileSync(outputPath, JSON.stringify(circular, null, 2), "utf-8");
      console.log(`Saved to ${outputPath}`);
    } else {
      console.log("No circular dependencies found.");
    }
  })
  .catch((error) => {
    console.error(error);
  });

2단계: 스크립트 실행

node madge.js

스크립트를 실행하면 2차원 배열이 얻어집니다.

2D 배열은 프로젝트의 모든 순환 종속성을 저장합니다. 각 하위 배열은 특정 순환 종속성 경로를 나타냅니다. 인덱스 n의 파일은 인덱스 n + 1의 파일을 참조하고, 마지막 파일은 첫 번째 파일을 참조하여 순환 종속성을 형성합니다.

Madge는 직접적인 순환 종속성만 반환할 수 있다는 점에 유의하는 것이 중요합니다. 두 파일이 세 번째 파일을 통해 간접적인 순환 종속성을 형성하는 경우 해당 파일은 Madge의 출력에 포함되지 않습니다.

실제 프로젝트 상황을 바탕으로 Madge는 6,000줄이 넘는 결과 파일을 출력했습니다. 결과 파일은 두 파일 간의 의심되는 순환 종속성이 직접 참조되지 않음을 보여줍니다. 두 대상 파일 간의 간접적인 종속성을 찾는 것은 건초 더미에서 바늘을 찾는 것과 같았습니다.

간접 순환 종속성을 찾기 위한 스크립트 작성

다음으로 저는 ChatGPT에게 결과 파일을 기반으로 두 대상 파일 사이의 직접 또는 간접 순환 종속성 경로를 찾는 스크립트 작성을 도와달라고 요청했습니다.

/**
 * Check if there is a direct or indirect circular dependency between two files
 * @param {Array<string>} targetFiles Array containing two file paths
 * @param {Array<Array<string>>} references 2D array representing all file dependencies in the project
 * @returns {Array<string>} Array representing the circular dependency path between the two target files
 */
function checkCircularDependency(targetFiles, references) {
  // Build graph
  const graph = buildGraph(references); // Store visited nodes to avoid revisiting
  let visited = new Set(); // Store the current path to detect circular dependencies
  let pathStack = [];
  // Depth-First Search
  function dfs(node, target, visited, pathStack) {
    if (node === target) {
      // Found target, return path
      pathStack.push(node);
      return true;
    }
    if (visited.has(node)) {
      return false;
    }
    visited.add(node);
    pathStack.push(node);
    const neighbors = graph[node] || [];
    for (let neighbor of neighbors) {
      if (dfs(neighbor, target, visited, pathStack)) {
        return true;
      }
    }
    pathStack.pop();
    return false;
  }
  // Build graph
  function buildGraph(references) {
    const graph = {};
    references.forEach((ref) => {
      for (let i = 0; i < ref.length; i++) {
        const from = ref[i];
        const to = ref[(i + 1) % ref.length]; // Circular reference to the first element
        if (!graph[from]) {
          graph[from] = [];
        }
        graph[from].push(to);
      }
    });
    return graph;
  }
  // Try to find the path from the first file to the second file
  if (dfs(targetFiles[0], targetFiles[1], new Set(), [])) {
    // Clear visited records and path stack, try to find the path from the second file back to the first file
    visited = new Set();
    pathStack = [];
    if (dfs(targetFiles[1], targetFiles[0], visited, pathStack)) {
      return pathStack;
    }
  }
  // If no circular dependency is found, return an empty array
  return [];
}
// Example usage
const targetFiles = [
  "scene/home/controller/home-controller/grocery-entry.ts",
  "../../request/api/home.ts",
];
const references = require("./circular-dependencies");
const circularPath = checkCircularDependency(targetFiles, references);
console.log(circularPath);

Madge의 2D 배열 출력을 스크립트 입력으로 사용한 결과 실제로 index.js와 utils.js 사이에 26개의 파일이 포함된 체인으로 구성된 순환 종속성이 있는 것으로 나타났습니다.

근본 원인

문제를 해결하기 전에 근본 원인을 이해해야 합니다. 순환 종속성으로 인해 참조 상수가 정의되지 않는 이유는 무엇입니까?

문제를 시뮬레이션하고 단순화하기 위해 순환 종속성 체인이 다음과 같다고 가정해 보겠습니다.

index.js → 구성 요소 항목.js → request.js → utils.js → 구성 요소 항목.js

프로젝트 코드는 최종적으로 Webpack으로 번들링되고 Babel을 사용하여 ES5 코드로 컴파일되므로 번들된 코드의 구조를 살펴봐야 합니다.

Webpack 번들 코드의 예

(() => {
  "use strict";

  var e,
    __modules__ = {
      /* ===== component-entry.js starts ==== */
      148: (_, exports, __webpack_require__) => {
        // [2] define the getter of `exports` properties of `component-entry.js`
        __webpack_require__.d(exports, { Cc: () => r, bg: () => c });
        // [3] import `request.js`
        var t = __webpack_require__(595);
        // [9]
        var r = function () {
            return (
              console.log("A function inside component-entry.js run, ", c)
            );
          },
          c = "An constants which comes from component-entry.js";
      },
      /* ===== component-entry.js ends ==== */

      /* ===== request.js starts ==== */
      595: (_, exports, __webpack_require__) => {
        // [4] import `utils.js`
        var t = __webpack_require__(51);
        // [8]
        console.log("request.js run, two constants from utils.js are: ", t.R, ", and ", t.b);
      },
      /* ===== request.js ends ==== */

      /* ===== utils.js starts ==== */
      51: (_, exports, __webpack_require__) => {
        // [5] define the getter of `exports` properties of `utils.js`
        __webpack_require__.d(exports, { R: () => r, b: () => t.bg });
        // [6] import `component-entry.js`, `component-entry.js` is already in `__webpack_module_cache__`
        // so `__webpack_require__(148)` will return the `exports` object of `component-entry.js` immediately
        var t = __webpack_require__(148);
        var r = 1001;
        // [7] print the value of `bg` exported by `component-entry.js`
        console.log('utils.js,', t.bg); // output: 'utils, undefined'
      },
      /* ===== utils.js starts ==== */
    },

    __webpack_module_cache__ = {};

  function __webpack_require__(moduleId) {
    var e = __webpack_module_cache__[moduleId];

    if (void 0 !== e) return e.exports;

    var c = (__webpack_module_cache__[moduleId] = { exports: {} });

    return __modules__[moduleId](c, c.exports, __webpack_require__), c.exports;
  }

  // Adds properties from the second object to the first object
  __webpack_require__.d = (o, e) => {
    for (var n in e)
      Object.prototype.hasOwnProperty.call(e, n) &&
        !Object.prototype.hasOwnProperty.call(o, n) &&
        Object.defineProperty(o, n, { enumerable: !0, get: e[n] });
  },

  // [0]
  // ======== index.js starts ========
  // [1] import `component-entry.js`
  (e = __webpack_require__(148/* (148 is the internal module id of `component-entry.js`) */)),
  // [10] run `Cc` function exported by `component-entry.js`
  (0, e.Cc)();
  // ======== index.js ends ========
})();

예제에서 [숫자]는 코드의 실행 순서를 나타냅니다.

단순 버전:

function lazyCopy (target, source) {
  for (var ele in source) {
    if (Object.prototype.hasOwnProperty.call(source, ele)
      && !Object.prototype.hasOwnProperty.call(target, ele)
    ) {
      Object.defineProperty(target, ele, { enumerable: true, get: source[ele] });
    }
  }
}

// Assuming module1 is the module being cyclically referenced (module1 is a webpack internal module, actually representing a file)
var module1 = {};
module1.exports = {};
lazyCopy(module1.exports, { foo: () => exportEleOfA, print: () => print, printButThrowError: () => printButThrowError });
// module1 is initially imported at this point

// Assume the intermediate process is omitted: module1 references other modules, and those modules reference module1

// When module1 is imported a second time and its `foo` variable is used, it is equivalent to executing:
console.log('Output during circular reference (undefined is expected): ', module1.exports.foo); // Output `undefined`

// Call `print` function, which can be executed normally due to function scope hoisting
module1.exports.print(); // 'print function executed'

// Call `printButThrowError` function, which will throw an error due to the way it is defined
try {
  module1.exports.printButThrowError();
} catch (e) {
  console.error('Expected error: ', e); // Error: module1.exports.printButThrowError is not a function
}

// Assume the intermediate process is omitted: all modules referenced by module1 are executed

// module1 returns to its own code and continues executing its remaining logic
var exportEleOfA = 'foo';
function print () {
  console.log('print function executed');
}
var printButThrowError = function () {
  console.log('printButThrowError function executed');
}

console.log('Normal output: ', module1.exports.foo); // 'foo'
module1.exports.print(); // 'print function executed'
module1.exports.printButThrowError(); // 'printButThrowError function executed'

Webpack 모듈 번들링 프로세스

AST 분석 단계에서 Webpack은 ES6 가져오기 및 내보내기 문을 찾습니다. 파일에 이러한 명령문이 포함되어 있으면 Webpack은 모듈을 "조화" 유형으로 표시하고 내보내기를 위해 해당 코드 변환을 수행합니다.

https://github.com/webpack/webpack/blob/c586c7b1e027e1d252d68b4372f08a9bce40d96c/lib/dependentities/HarmonyExportInitFragment.js#L161

https://github.com/webpack/webpack/blob/c586c7b1e027e1d252d68b4372f08a9bce40d96c/lib/RuntimeTemplate.js#L164

근본 원인 요약

1. 문제 증상: 모듈이 상수를 가져오지만 실행 시 실제 값이 정의되지 않습니다.

2. 문제 발생 조건:

   • 이 프로젝트는 Webpack으로 번들링되어 ES5 코드로 컴파일됩니다(다른 번들러로 테스트되지 않음).
   • 모듈 A는 상수 foo를 정의하고 이를 내보내는데, 이 모듈은 다른 모듈과 순환 종속성을 갖습니다.
   • 모듈 B는 모듈 A에서 foo를 가져오고 모듈 초기화 프로세스 중에 실행됩니다.
   • 모듈 A와 모듈 B는 순환 종속성을 갖습니다.

3. 근본 원인:

   • In Webpack's module system, when a module is first referenced, Webpack initializes its exports using property getters and stores it in a cache object. When the module is referenced again, it directly returns the exports from the cache object.
   • let variables and const constants are compiled into var declarations, causing variable hoisting issues. When used before their actual definition, they return undefined but do not throw an error.
   • Function declarations are hoisted, allowing them to be called normally.
   • Arrow functions are compiled into var foo = function () {}; and function expressions do not have function scope hoisting. Therefore, they throw an error when run instead of returning undefined.

How to Avoid

ESLint

We can use ESLint to check for circular dependencies in the project. Install the eslint-plugin-import plugin and configure it:

// babel.config.js

import importPlugin from 'eslint-plugin-import';

export default [
  {
    plugins: {
      import: importPlugin,
    },
    rules: {
      'import/no-cycle': ['error', { maxDepth: Infinity }],
    },
    languageOptions: {
      "parserOptions": {
        "ecmaVersion": 6, // or use 6 for ES6
        "sourceType": "module"
      },
    },
    settings: {
      // Need this to let 'import/no-cycle' to work
      // reference: https://github.com/import-js/eslint-plugin-import/issues/2556#issuecomment-1419518561
      "import/parsers": {
        espree: [".js", ".cjs", ".mjs", ".jsx"],
      }
    },
  },
];

위 내용은 ESrojects의 순환 종속성 문제 해결의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!