뷰(Vuejs)는 기본값으로 IE9를 지원하지만 스벨트(Svelte)는 IE에서 구동이 안되어서 내부 프로젝트에만 쓰고 있었다. 이번에 IE를 지원하는 앱을 리팩토링해야 해서 뷰를 걷어내고 스벨트를 적용해보려고 IE에서 작동하게 하는 방법을 찾아봤다. 보통은 바벨로 트랜스파일하지만 리치 해리스가 버블(Buble)이라는 프로젝트도 만들었다는 것을 듣고 버블을 적용해 봤다.

버블 적용 방법대로하면 rollup-plugin-buble 추가하고 rollup.config.js의 플러그인 부분에 buble()만 추가하면 된다. 하지만 이 상태로 스벨트 앱을 트랜스파일하면 for-of가 완전히 지원되지 않는다고 하면서 오류가 난다. 위험해 보이는 buble({ transforms: { dangerousForOf: true } }) 옵션을 주면 그제서야 트랜스파일이 되고 개발 서버가 올라온다. 여기에 Promise와 Object.assign 폴리필을 추가해주면 IE에서 스벨트 앱이 구동된다.

기존의 뷰로 만든 앱을 스벨트로 변환하고 똑같이 적용하고 IE에서 돌려보니 추가 오류가 발생했다. 처음에는 폴리필 몇 개 더 추가해주면 간단히 해결될 문제인줄 알았다. 버블은 트랜스파일로 인한 용량 증가나 실행속도 저하같은 오버헤드가 거의 없는 반면에 ES6의 구문중에 부담스러운 구문 몇가지를 구현하지 않았다고 한다. 그런데 그 구문중에 async, await가 있다.

바로 포기하고 바벨로 트랜스 파일하는 방법을 찾아 해봤다. @rollup/plugin-babel, @babel/preset-env, @babel/plugin-syntax-dynamic-import, @babel/plugin-transform-runtime 패키지를 추가하고 아래의 설정을 추가해준다. 설정 장황해서 바벨은 건드리고 싶지 않은데 선택의 여지가 없다. 얼마전 처음 적용해보고 지금 글쓰는 그새 패키지가 변경되어서 옵션 하나가 바뀌기까지 했다.

babel({
  extensions: [ '.js', '.mjs', '.html', '.svelte' ],
  babelHelpers: 'runtime',
  exclude: [ 'node_modules/@babel/**' ],
  presets: [
    [
      '@babel/preset-env',
      {
        targets: '> 0.25%, not dead, IE 11'
      }
    ]
  ],
  plugins: [
    '@babel/plugin-syntax-dynamic-import',
    [
      '@babel/plugin-transform-runtime',
      {
        useESModules: true
      }
    ]
  ]
}),

여기다가 폴리필을 더 추가해서 IE에서 구동했다. 앱을 변환하는 작업은 조금 노가다지만 결과적으로 용량도 30% 줄고 빌드도 간단해지고 뷰의 카멜케이스랑 케밥케이스 섞어 쓰는거 더이상 안봐서 아주 만족이다.