디자인시스템을 번들링하는 과정에서 babel이 제대로 설정되어있는 것 같지 않아 바벨을 설정하기 위한 rollup 설정을 진행하고 있다. 그러던 중 babel runtime이라는 개념을 발견했는데 이게 뭔지 한번 알아보았다.
일단 그 전에 babelHelper라는 개념을 알아야 한다.
babel helper는 대상 ES버전에서 지원하지 않는 기능을 에뮬레이트하기 위해 주입하는 도우미이다.
자세히는 모르겠지만 일종의 폴리필같은 개념인 것 같다. 어쨋든 babel helper는 이러한 도우미를 기본적으로 inline으로 주입한다. 이는 헬퍼들이 각 파일에 걸쳐서 공유되는 것이 아닌 각 파일마다 각각 헬퍼들을 주입받는다는 것을 의미한다.
따라서 이러한 헬퍼들이 파일간 공유될 수 있도록 하는것이 어떨까 해서 고안된 것이 babel-plugin-transform-runtime 플러그인인데, 이 플러그인은 babel-runtime 모듈에 따라 적절하게 필요한 헬퍼들을 주입해 준다. 이로써 코드간에 중복되는 헬퍼공유를 줄일 수 있게 된다.
즉 babel runtime은 실제 실행 환경에서 헬퍼함수들이 참조할 수 있는 폴리필을 내장한 모듈로서 동작한다.