[Setting] npm link 2

npm link 에 대한 개념은 이전 글에서 정리하여 생략하였습니다!

2023.10.17 - [Backend/Etc : Setting | Git] - [Setting] 내부 서버로부터 파일 clone | npm link | build

 

---

 

문제 인식

• 1번째 작업 : GUI의 develop 브랜치(root)와 VM의 feature/tfjs-handpose 브랜치에서는 빌드 성공 + 내가 작성한 코드가 반영 잘 됨
• 그러나 2번째 작업 : face-detection을 적용하기 위한 feature/tfjs-face 브랜치에서 작업 후, 다시 feature/tfjs-handpose로 돌아와 빌드하면 빌드 실패
• 오류 내용

node:internal/modules/cjs/loader:1084 Uncaught Error: Cannot find module '@mediapipe/hands'
Require stack:
C:\Workspace\AI\Handpose\ai_roborobo\node_modules@tensorflow-models\hand-pose-detection\dist\mediapipe\detector.js
C:\Workspace\AI\Handpose\ai_roborobo\node_modules@tensorflow-models\hand-pose-detection\dist\create_detector.js
C:\Workspace\AI\Handpose\ai_roborobo\node_modules@tensorflow-models\hand-pose-detection\dist\index.js
C:\Workspace\AI\Handpose\ai_roborobo\index.html at node:internal/modules/cjs/loader:1084:15 at Function._resolveFilename (node:electron/js2c/renderer_init:2:5527) at node:internal/modules/cjs/loader:929:27 at Function.<anonymous> (node:electron/js2c/asar_bundle:2:13327) at Function._load (node:electron/js2c/renderer_init:2:4757) at Module.require (node:internal/modules/cjs/loader:1150:19) at require (node:internal/modules/cjs/helpers:121:18) at Object.<anonymous> (C:\Workspace\AI\Handpose\ai_roborobo\node_modules@tensorflow-models\face-detection\dist\mediapipe\detector.js:56:21) at Object.<anonymous> (C:\Workspace\AI\Handpose\ai_roborobo\node_modules@tensorflow-models\face-detection\dist\mediapipe\detector.js:210:3) at Module._compile (node:internal/modules/cjs/loader:1271:14)

• GUI에서 최종 빌드를 진행하기 때문에, 위 오류는 결국 GUI에서 @mediapipe/hands 모듈을 인식하지 못한다는 소리가 됨
• GUI는 ①node_modules/@tensorflow-models 에서 hand-pose-detection 모델을 인식하고, ②node_modules/scratch-vm/~ 에서 VM과 관련된 코드를 인식함. 이 때 둘은 npm link로 이어져 있음
• 그러나 나는 VM에 @mediapipe/hands 모듈을 설치해놓은 상태였음에도 GUI가 인식하지 못함
• 따라서 npm link의 문제라고 생각함

 

---

 

1. npm link 의미(용도)

• Symbolic link ( 줄여서 Symlink) = 바로가기 파일
• GUI에서 npm link VM 을 실행하면, 외부 모듈(VM)이 현재 프로젝트(GUI)의 node_modules 디렉토리에 설치된 것처럼(npm install한 것처럼) 사용될 수 있게 해줌
• 즉 해당 모듈(GUI)에 VM에 대한 전역 심볼릭 링크를 설정하는 것

 

---

 

2. npm link 사용법

• 위 오류 해결 방법 후보
  1. 프로젝트 변경될 때마다 (VM에 브랜치 생성할 때마다), GUI의 develop 브랜치에 npm link
  2. 프로젝트 변경될 때마다 (VM에 브랜치 생성할 때마다), GUI에 브랜치 생성하여 npm link
• 내 생각 1: GUI root 디렉토리를 계속 건드리는게 좋지 않아 보임, 따라서 후보2를 실행해보려고 함
• 그러나 npm link는 브랜치 단위가 아닌 프로젝트 단위(디렉토리 단위)로 생성됨
  • 따라서 후보2를 실행해도 브랜치별로 다른 npm link가 걸리는 것이 아니라, 설정된 npm link가 계속 변경됨
  • 따라서 후보1 실행하기로 함
• 핵심 코드

// blocks
npm link l10n

// l10n
npm link l10n

// VM
npm link l10n blocks --force  // peer dependency conflict 방지

// GUI
npm link l10n blocks VM

• npm link를 프로젝트가 작은 것 → 큰 것 순서로 진행하는 느낌
• --force 또는 --legacy-peer-deps 는 peer dependency conflict 를 방지하기 위해 실행 
  • Tensorflow-models - 모델 버전 관리 - 2. peer dependency 충돌 글 보러가기
  • knn-classifier | hand-pose-detection 같은 Tensorflow-models의 권장되는 peer dependency를 설치하지 않고 코드 실행 또는 빌드 실행하여 conflict 발생 가능성
  • 그러나 conflict 발생 여부와 코드 실행 또는 빌드 실행 가능 여부는 별도의 문제이므로 실행 가능

 

---

 

해결법

프로젝트 변경될 때마다 (VM에 브랜치 생성할 때마다), GUI의 develop 브랜치에 npm link 하고 build