오픈소스 차트 라이브러리
apexchart를 사용하는 프로젝트를 진행중이다.
boxPlot 관련 버그가 있었는데,
2022년 1월에 관련 내용이 올라왔음에도 수정이 되지 않고 있었다.
이슈를 다시 등록한다고 한들, 언제 처리가 될 지 모르고
프로젝트 마감까지 기다릴 여건이 안돼서 직접 수정하기로 했다.
진행하면서 배운 바가 있어 작성해본다.
1. 의존성 관리
node_modules 내의 파일만 수정할 경우, 내 로컬에서는 동작하지만
서비스를 배포 시 npm i apexchart 를 통해 해당 라이브러리를 매번 설치하기 때문에
배포된 서비스에는 반영되지 않는다.
세 가지 방법을 생각했다.
-
patch-package사용딱 내 상황을 위해 사용하는 라이브러리이다.
preinstall명령어를 통해의존성 패키지 설치 후 작성해놓은
diff스크립트에 따라 패키지 내용을 수정해준다.급하게 땜빵해두고 공식 레포지토리에 이슈로 등록해 처리를 기다린다.
사용법을 찾다보니 빌드가 실패하는 여러 예외 케이스에 대한 글들이 있었고,
내 버그 고치려다 빌드 뻑나서 프로젝트 전체에 문제 발생하는 일이 생길까봐 포기했다.
-
소스 파일에 수정한 라이브러리 정적 파일 포함하기
너무 무거워질 가능성이 있고 별로다 -
수정한 라이브러리를 npm 에 직접 등록, 내 라이브러리를 설치하도록
pacakge.json수정
3번으로 했다.
2. node.js
구조 파악
node_modules/apexcharts/src 내의 파일을 수정해 버그를 고치는게 계획이었다.
오잉
해당 소스를 수정해도 페이지에 반영이 안됐다.
/apexcharts/dist/apexcharts.min.js import 시 빌드 후 minified 된 파일이 실행되고 있었다.
라이브러리의 package.json 을 보고 어떤 파일이 실행될 지 예측할 수 있다.
별도 설정이 없을 경우, import 문은 해당 모듈 내의 index.js 파일을 찾는다.
package.json
...
"main": "dist/apexcharts.common.js",
"unpkg": "dist/apexcharts.js",
"jsdelivr": "dist/apexcharts.js",
...apexchart 의 경우엔 빌드된(/dist) apexcharts.common.js 를 참조하라고 설정되어있다.
그런데 왜 apexcharts.min.js 가 실행되었을까?
이는 내 프로젝트의 번들러 설정에 의해서일 가능성이 있다.
글을 작성하며 생각해보니
exports 설정을 바꿔 빌드 전 파일을 참조하도록 하여 테스트하며 진행했으면 수월했을 거 같은데,
당시에는 CJS, ESM 버전이나 빌드 설정을 공부하여 바꿀 마음의 여유가 없어
멀리 돌아가는 길로 진행했다.
오류 수정
apexchart 레포지토리를 fork해 로컬로 내려받고
수정 후 빌드한 뒤 minified 파일을 프로젝트에 갈아끼우며 테스트했다. 허허
그나마 수월했던 건 apexchart에서 dev 환경을 제공해줘서
npm run dev를 통해 localhost 서버에서 수정 내역을 테스트해볼 수 있다는 거였다.
apexchart 레포지토리 내의 /sample 디렉토리에 있는 정적 html 파일이
dist/apexchart.js 를 참조하고 있고,
dev 환경에서 수정 후 저장하면 수정내역이 해당 파일에 반영됐다.
오류도 수정하고, 필요한대로 조금 커스텀도 한 뒤 빌드해서
프로젝트에 해당 파일을 갈아끼우니 버그를 고칠 수 있었다.
https://github.com/0hhanum/customApexChart
ㅋㅋ
3. npm 배포
apexchart 자체가 오픈소스용으로 설정이 다 되어있어서
사실 별거 없었다.
package 메타정보를 좀 수정하고
npm publish 로 배포한다.
잘 배포되었다. (https://www.npmjs.com/~0hhanum)
vue 에서 사용시 vue-apexchart 라는 래퍼를 이용하면 편한데,
해당 래퍼에도 변경사항을 적용해야해서
새로운 수정사항이 있을때마다
apexchart-0hhanum 배포, vue-apexchart-0hhanum 에서 라이브러리 최신화 (npm i vue-apexcharts-0hhanum)
빌드 후 배포
라는 번거로운 과정을 거쳐야하긴 하지만 (아마 스크립트 잘 짜면 자동화 가능할 듯 하다)
프로젝트에서 기존 apexchart를 지우고 내 패키지로 설치한 뒤 버그 수정이 됐음을 확인했다.
오픈소스 기여까지는 아니지만
npm 커스텀 패키지도 처음으로 배포해보고, 라이브러리도 수정해봤다. 하하
