nuxt.js(v2)로 IE11 대응을 한다(JS편)

■ 동작 확인된 버전

nuxt.js(2.11.0)

create-nuxt-app(v2.12.0)

■ 갱신 이력

2020/2/5 최신 버전에 맞게 다시 작성되었습니다.

이제 .browserslistrc 파일을 사용할 수 있습니다.

권장 polyfill 설정 방법을 추가했습니다.

특히 설치가 필요하지 않습니다 (cool!). 이하에, 확인・변경의 포인트를 기재합니다.

대응 브라우저의 확인 방법

지원 브라우저는 "browserslist 패키지"에서 확인하십시오. 터미널에서 % npx browserslist를 실행하십시오.

terminal

% npx browserslist

ディフォルト設置の対応ブラウザ
↓
and_chr 79
and_ff 68
and_qq 1.2
and_uc 12.12
android 76
baidu 7.12
chrome 79
chrome 78
chrome 49
edge 18
edge 17
firefox 72
firefox 71
firefox 70
firefox 68
ie 11
ios_saf 13.3
ios_saf 13.2
ios_saf 13.0-13.1
ios_saf 12.2-12.4
kaios 2.5
op_mini all
op_mob 46
opera 64
opera 63
safari 13
safari 12.1
safari 5.1
samsung 10.1
samsung 9.2

Tips:browserslist 패키지는 Nuxt.js를 설치할 때 설치되었습니다. % npm ls browserslist를 실행해도 찾을 수 없으면 % npm i -D browserslist를 실행하여 설치하십시오.

지원 브라우저 변경

루트 (package.json과 동일한 계층 구조)에 ".browserslistrc"파일을 만들고 기본값 (defaults) 및 기타 필요한 설정을 추가하십시오. 설정 방법은 공식 문서을 참조하십시오.

.browserslistrc

defaults
android>=4.4
not IE 11

Tips: 기본값(defaults) 설정은 > 0.5%, last 2 versions, Firefox ESR, not dead입니다.

Tips:Nuxt.js 버전이 오래된 등의 이유로 .browserslistrc 파일이 유효하지 않을 수 있습니다. package.json의 사용도 고려하십시오.

package.json 버전의 설명 예

package.json

{
  ...
  "browserslist": [
    "defaults",
    "android >= 4.4",
    "not IE 11"
  ],
  ...
}

polyfill.io에서 polyfill 로드

Poly Fill. 이오에서 생성한 URL을 nuxt.config.js의 head 속성에서 읽습니다.

↓

nuxt.config.js

export default {
  head: {
    script: [
      { src: '//polyfill.io/v2/polyfill.min.js?features=WebAnimations,IntersectionObserver' }
    ],
  },
...

Tips: 추가로 필요한 경우 ?features= 뒤에 쉼표로 구분하여 추가합니다.
Tips:polyfill.io는 브라우저에 적합한 polyfill만을 반환합니다(cool!).

동작 확인

기본값을 유지하고 arrow 함수가 IE11에서 작동하는지 확인합니다.

.browserslistrc

defaults

증거

덤

Nuxt.js의 버전이 올라가고 깨달으면 ".browserslistrc"파일이 작동합니다. 또한 polyfill.io가 이렇게 편리했다는 것을 몰랐다. 땀

보다 간단하게 살 수 있게 되었습니다.