ROLLUP

commonJS, ESM 둘 다 지원하는 package.json 설정법 (feat. rollup)

알다시피, JS 런타임은 크게 브라우저와 Node.js가 있다.그리고 각각 ESM, CJS의 모듈 방식이 있다. 요즘 개발 환경은 웹 개발을 할 때에도 node가 필요한 경우가 많기에, 라이브러리를 구성한다면 두 환경 모두에서 작동할 수 있도록 작성하는 것이 좋다. 이번에 개인적으로 라이브러리를 만져보면서 rollup을 사용하여 mjs, cjs를 생성하고 어떻게 설정했는지, 기록을 남기고자 했다. ✨ rollup.config.js 설정하기import { defineConfig } from 'rollup';import typescript from '@rollup/plugin-typescript';export default defineConfig({ input: { index: 'index.ts', ..

번들러 Rollup 세팅해보기

Javascript 라이브러리를 만들 때, 번들링을 하면 여러 장점이 있다.Tree Shaking을 하여 불필요한 코드가 최종 결과물에 포함되지 않도록 할 수 있다. (최종 번들 크기를 줄일 수 있)모듈화된 코드들을 하나의 js 파일로 만들기 때문에, 네트워크 요청 비용을 절감하고 코드의 보안성을 높일 수도 있다.다양한 플러그인을 사용할 수 있고, 필요한 폴리필을 자동으로 포함시킬 수 있으 transpiling을 간편하게 설정할 수 있다. (다양한 환경에서 코드가 호환되도록 할 수 있다.)HMR(Hot Module Replacement)과 같은 개발환경을 구축하는데도 도움이 된다.소스 맵(Source Map)을 생성하여 디버깅을 쉽게 할 수 있다. (번들된 코드가 아닌 원본 코드의 위치와 내용을 확인할 ..