Sapper IE 11 Support

Sapper에서 IE 11 지원이 안되는 상황을 정리한다.

우선 이전 [Svelte 시작] Svelte로 프로젝트를 시작하려고 했었지만, IE support 세팅을 위해 삽질하다 포기하고 같은 기반의 SSR 프레임워크로 갈아타면서 좀 더 쉽게 IE support를 성공하였다.

이전 svelte + rollup 환경에서 초기화 상태보다
sapper + rollup 환경에서의 초기화 상태가 IE support를 성공하기에 좀 더 쉬운 환경이었다.

[Antony/Github]를 참고하였다.

Static file - src/template.html을 수정

%sapper.base% 헬퍼 이전 ie지원을 위한 정적 스크립트 라이브러리 삽입(polyfill)

Polyfils in template.html (via Polyfill.io):

• default
• fetch
• Array.prototype.find
• Object.values (not strictly necessary - but useful)

<script>if(!window.Promise||![].includes||!Object.assign||!window.Map||!window.fetch){
    document['wr'+'ite']('<script crossorigin="anonymous" src="https://cdn.polyfill.io/v3/polyfill.min.js?features=default,fetch,Array.prototype.find,Object.values"><\/script>')}
</script>

rollup.config.js 수정

Non-legacy (regular build) has rest spread so that Edge works (wow)

legacy && babel({
  extensions: ['.js', '.mjs', '.html', '.svelte'],
  babelHelpers: 'runtime',
  exclude: ['node_modules/@babel/**'],
  presets: [
    ['@babel/preset-env', {
      // spec: true,
      targets: '> 0.25%, ie >= 11, not dead'
    }]
  ],
  plugins: [
    '@babel/plugin-syntax-dynamic-import',
    ['@babel/plugin-transform-runtime', {
      useESModules: true
    }]
  ]
}),
!legacy && babel({
  extensions: ['.js', '.mjs', '.html', '.svelte'],
  exclude: ['node_modules/@babel/**'],
  plugins: [
    '@babel/plugin-syntax-dynamic-import',
    '@babel/plugin-proposal-object-rest-spread'
  ]
}),

Package.js script 수정

Special run mode to run the app via bable for easy local testing

"build": "sapper build --legacy && copy .\\node_modules\\shimport\\index.dev.js .\\__sapper__\\build\\client\\shimport@1.0.1.js",
"build:dev": "yarn build && yarn start",