소개

자바스크립트의 결합 처리를 하려고 하면, 종속성에 시달리고 있었다.
htps : // 코 m / 타카 ゔ ぁ K / MS / db2684fd1545853d 2

그들은 grunt-file-dependencies를 사용하여 해결할 수 있다고 믿습니다.
또한 정의 부분과 이용 부분을 코드 위에서 해석하기 위해 다음과 같은 설정을 추가했습니다.

gruntfile.js

 file_dependencies: {
      ...: {
        options: {
          extractDefinesRegex: /(?!:["'])(PRJ(?:[\.][a-zA-Z]+)*)(?:\s*=)/g,
          extractRequiresRegex: /(?!:["'])(PRJ(?:[\.][a-zA-Z]+)*)(?:\s*^=)/g,
        }

그러나, 그렇게 간단하게는 가지 않는 것으로, 2개의 문제가 발생했습니다.

같은 파일이 정의 및 요청에 추가되고 순환 참조 오류

순환 참조 오류에 대한 자세한 내용을 알 수 없습니다.

어떤 정의 정보가 문제인지 제시하지 않는다

순환 참조 오류 파일을 참조하는 파일도 오류로 표시됩니다.

그래서 순환 참조 에러의 본환을 찾기 위해 플러그인을 개조하여 상기 문제를 해결하면서,
참조 관계를 시각화하기로 결정했습니다.

grunt-file-dependencies 개조

플러그인의 개조의 포인트는 4개입니다.

정의와 요구가 같은 경우에 무시한다

순환이 발생하는 파일에만 좁힐 수 있습니다

순환이 발생하는 정의를 좁힐 수 있습니다

상기를 만족하면서 시각화할 수 있는 것

위 3개는 플러그인의 일부 함수를 변경하고 아래 1개는 dot 파일을 만드는 메커니즘을
내장해보기로 했습니다(dot 파일은 Graphviz로 이미징할 수 있다).
htps : // 기주 b. 코 m / 타카 ゔ ぁ ゜ k / g 룬 t 훗
※ 자세한 내용은 위의 포크를 참조하십시오.

시각화한 화상은 어떻게 되었는가 하면, 다음과 같은 느낌이 됩니다.

※ Graphviz의 설치 & 패스 추가와 VSCode에 Graphviz Preview라는 플러그인을 설치했습니다.

2018/9/4 현재, cyclemap.dot 라는 파일명 고정으로 만들고 있기 때문에, Pull 받는 품질이 아니고,
node_modules\grunt-file-dependencies\tasks\file_dependencies.js
를 수동으로 교체해야 합니다. 하지만 상당히 사용할 수 있는 툴이 되었다고 생각합니다.

TODO

추가한 옵션은 마음대로 붙이는 것이므로, option으로 전환을 할 수 있는 것과,
DRY의 법칙에 위배되므로 더 나은 수정 방법으로 전환해야 하지만,
일단, 사용할 수 있게 되었으므로 메모로서 남겨 둡니다.

같은 파일 건너뛰기

dot 파일의 출력 유무

dot 파일의 이름

아주 좋은 플러그인이므로, 이것들이 생기면, 받아들여주고 싶다-라고 생각하고 있습니다.