👨‍💻 사건

Foundation 파트를 끝내서, 이 부분만 먼저 npm 에 패키지화해서 배포해보기로 했다.
내가 생각한 단계는 다음과 같다.
1. 프로젝트를 build 한다.
2. 터미널에서 npm login 을 통해, npm 사이트에 로그인한다.
3. build 한 프로젝트를 npm pack 을 하여, 한번 잘 적용되는지 확인해본다.
4. npm pack 한 파일들을 다시 지우고, npm publish 를 통해 최종적으로 npm 에 올린다.

1번 과정부터 오류가 발생했다.. 단일 번들러하여 빌드를 하고 src 파일을 ts 파일과 js 파일로 컴파일 한 파일이 나와야하지만, 어째서인지 단일 번들러 기능 즉, vite build 만 작용하고, tsc 기능이 작용하지 않았다.

✅ 해결

정말 많은 삽질끝에 발견했다.

"build": "tsc && vite build"

이렇게 설정되있는데, 해당 명령어를 해석하면, 컨파일러를 돌리고, 그다음 빌드를 해줘. 라고 적혀있다.
그러나, tsc 는 작동을 하지않고 vite build 만 해서 asset 폴더에 번들링되어 앞축 되기만 하였다.
그래서 명령어의 서순을 반대로 돌려주니 정상적으로 작동하였다.

"build": "vite build && tsc "

-> 이것은 순서 문제가 아니라, vite build 의 경로와 컴파일된 파일의 경로가 같아서 추가하는 형태가 아니라 덮어쓰는 형태로 되어서 그렇다.

일단 전체파일이 번들러가 된 js 파일과 폰트 및 css 파일이 assets 폴더에 저장이 되는 형태이고, root의 index.html 에 연결되는 형태이다. -> vite build 를 실행하여 진행된 번들링 된 파일이다.

<script type="module" crossorigin src="/assets/index-079e7826.js"></script>

그다음 tsc 명령어의 경우, 홈페이지에 필요한 파일들은 컴파일 되어서 설정해둔 outDir 위치에 src 폴더가 올라간다.
그럼 현재 내가 npm 업로드에 필요한 파일은 컴파일링된 src 파일이기 때문에, tsc 만 실행하고 npm publish 를 해주면 된다.

💭 개선

• 가능한지는 모르지만 한번 나중에 시간이 여유있다면 시도해보려고한다. 이것을 해결하기전에, npm 패키지해서 올려보고, 오류가 발생하거나 한다면 이를 우선시하여 해결해야한다.