ELECTRON + TypeScript 사용해 보기(2) - cannot find module ...

2021.06.21 - [ELECTRON] - ELECTRON + TypeScript 사용해 보자(1)

 

 

이번에는 모듈 경로 설정에 대해서 살펴보겠습니다.

 

 

간단한 테스트를 위해 src/modules에 util.ts를 추가하고 함수를 하나 추가하고,

 

export function testUtil():void {
  console.log("testUtil")
}

 

renderer.ts에 testUtil을 사용하는 코드를 추가했습니다.

 

import { testUtil } from "./modules/util";


const newWindowBtn = document.getElementById('new-window');

newWindowBtn.addEventListener('click', (event) => {
    testUtil();
});

 

tsc로 소스코드는 에러 없이 컴파일이 되는데 프로그램을 실행하면 util을 못 찾아서 에러가 발생합니다.

 

Cannot fild module './modules/util' ......

 

 

 

electron에서 모듈을 찾을 때 해당 경로를 왜 못 찾는지 이유를 모르겠군요.

 

구글에서 열심히 검색한 후 가장 간단한 방법으로 해결했습니다.

 

tsconfig.json에 path alias를 설정하고 module-alias라는 패키지를 사용하면 됩니다.

 

먼저, tsconfig.json의 path 속성에 "@src/*":["src/modules/*"] 을 추가합니다.

 

{
  "compilerOptions": {
    "module": "commonjs",
    "noImplicitAny": true,
    "sourceMap": true,
    "outDir": "dist",
    "baseUrl": ".",
    "paths": {
      "*": ["node_modules/*"],
      "@src/*":["src/modules/*"]
    }
  },
  "include": [
    "src/**/*"
  ]
}

 

그리고 module-alias를 설치합니다.

 

npm install --save-dev module-alias

 

package.json에 module-alias를 위한 설정을 추가합니다.

 

"_moduleAliases": {
    "@src": "./dist/modules"
 }
  

 

마지막으로 renderer.ts 맨 위에 module-alias를 import 합니다.

 

import 'module-alias/register';

 

TypeScript 설정해서 사용하는 게 쉽지 않네요.

 

혹시, 정확한 원인 아시는 분, 답글 달아 주시면 감사하겠습니다. ^^