Rollup은 이미 잘 만들어진 번들러인데, 왜 갑자기 이름이 비슷한 Rolldown이라는 도구가 등장했을까요? 🤔 게다가 Vite는 8 버전부터 오랫동안 써 온 Rollup을 두고 이 Rolldown을 기본 번들러로 채택했습니다. 멀쩡히 돌아가던 도구를 갈아엎은 데는 그만한 이유가 있겠죠. 최근 JavaScript 도구들이 하나둘 Rust로 다시 작성되는 흐름 위에 Rolldown도 놓여 있습니다. SWC가 Babel을, Oxc가 ESLint를 겨냥했다면, Rolldown은 Rollup의 자리를 노립니다. 이번 글에서는 Roll
Vite로 프로젝트를 만들다 보면 @vitejs/plugin-react나 vite-plugin-svgr 같은 플러그인을 한두 개쯤은 꼭 설치하게 되는데요. vite.config.js의 plugins 배열에 함수 하나 넣었을 뿐인데 JSX가 변환되고, SVG가 컴포넌트로 바뀌고, 환경 변수가 주입됩니다. 도대체 이 플러그인이라는 게 안에서 무슨 일을 하길래 빌드 과정에 이렇게 자연스럽게 끼어들 수 있는 걸까요? 🤔 사실 Vite 플러그인은 생각보다 훨씬 단순한 구조로 되어 있습니다. 객체 하나에 약속된 이름의 함수 몇 개를 넣어주면
Vite나 Webpack 같은 도구는 많이 들어 봤어도 Rollup은 조금 생소할 수 있는데요. 사실 우리가 매일 쓰는 수많은 도구가 그 밑에서 Rollup을 돌리고 있습니다. Vite는 한동안 프로덕션 빌드에 Rollup을 그대로 썼고, React나 Vue 같은 라이브러리도 Rollup으로 번들링되어 배포됩니다. 그러니까 Rollup은 화려하게 드러나진 않지만 JavaScript 생태계의 바닥을 받치고 있는 도구인 셈이죠. 🛠️ 이번 글에서는 Rollup이 정확히 무엇이고 왜 만들어졌는지부터 짚어 보고, 직접 번들을 만들어 보면