Nuxt 에 babel polyfill 적용하는 방법이 궁금합니다.

Question

덕분에 Nuxt 로 어찌어찌 프로젝트 막바지까지 왔습니다.

그런데, IE11 에서 테스트 해보니 몇몇 컴포넌트들이 아예 화면에 표시되지 않네요.

안나오는 컴포넌트들의 공통점이 주로 transform 을 이용하는 종류가 많은것 같습니다.

vue js 용 fullpage js, swiper js, 직접 구현한 내비게이션, 카카오지도 및 카카오 주소 등 이네요.

IE11 콘솔에 "polyfill-eventsource added missing EventSource to window"

이라는 메시지가 뜨고 그 아래 줄에는

SCRIPT1002: 구문 오류 라고 표시됩니다.

그래서 여기저기 검색해보니 babel polyfill 을 적용하면 된다는것 같아서

이것저것 찾아봤는데 Nuxt 에서 명확하게 적용하는 방법을 못찾겠습니다.

그냥 vue-cli 에 적용하는건 몇 개 보이는데 이걸 어떻게 Nuxt에 적용할지

이리저리 해봤는데 안되네요.;;;

특히나 뭘 설치해야 하고, nuxt.config.js 에는 어떻게 적용해야 하는지...

오늘 하루종일 이 문제로 헤메다가 다시 제로초님께 도움을 청하게 됐습니다^^;;;

감사합니다.

Answer

에러 메시지에 코드 줄수를 클릭해서 어떤 모듈이 최신문법인지 확인해보세요. 그 모듈을 nuxt.config.js에서

build: {

transfile: [모듈]

}

에 넣으세요. 그래야 그 모듈이 babel 트랜스파일됩니다.

Answer

이건 어쩔 수가 없습니다. includes가 ie11에서 지원되지 않는 문법이라서 어떤 라이브러리가 그걸 쓰는지 확인하고, 그걸 바벨 목록에 넣어야 합니다. 기본적으로 바벨은 node_modules 안의 라이브러리를 트랜스파일하지 않습니다. 왜냐면 이미 바벨 처리되었을거라고 가정해서요. 그런데 일부 라이브러리는 ie11을 지원 안 해서 최신문법으로 적고 바벨도 안 돌립니다. 그런 게 문제가 돼서 저희가 찾아서 직접 목록에 넣어야 합니다.

Answer

답변주신 내용 참고해서이리저리 해보다보니 IE11에서store.js 파일에서 아래와 같은 에러가 발생고 여전히 몇몇 컴포넌트들이 표시되지 않습니다. SCRIPT438: 개체가 'includes' 속성이나 메서드를 지원하지 않습니다. nuxt.config.js 파일에 build 항목을 다음과 같이 설정하고,  build:{ extend(config,ctx){ config.module.rules.push({ enforce:'pre', test:/\.(js|vue)$/, loader:'eslint-loader', exclude:/(node_modules)/, options:{ fix:true, }, }); }, babel:{ presets(env,[preset,options]){ constenvTargets={ client:{browsers:['last2versions'],ie:11}, server:{node:'current'}, }; return[ [ '@nuxt/babel-preset-app', { useBuiltIns:'entry', targets:envTargets[env.envName], corejs:{version:3}, polyfills:['es.array.iterator','es.promise','es.object.assign','es.promise.finally','es.array.includes','es.symbol'], }, ], ]; }, }, transpile:['@nuxtjs/axios','gsap','swiper','vue-awesome-swiper','nuxt-fullpage.js','vue-datetime','vue-daum-postcode','vue-advanced-cropper'], },  의존성은 아래처럼 설치했습니다.  'scripts':{ 'dev':'nuxt', 'build':'nuxtbuild', 'start':'nuxtstart', 'generate':'nuxtgenerate', 'lint:js':'eslint--ext.js,.vue--ignore-path.gitignore.', 'lint':'npmrunlint:js' }, 'dependencies':{ '@nuxtjs/axios':'^5.12.2', '@nuxtjs/moment':'^1.6.1', 'cookie-universal-nuxt':'^2.1.4', 'gsap':'^3.5.1', 'luxon':'^1.25.0', 'nuxt':'^2.14.6', 'nuxt-fullpage.js':'0.0.3', 'swiper':'^5.4.5', 'vue-advanced-cropper':'^0.17.9', 'vue-awesome-swiper':'^4.1.1', 'vue-datetime':'^1.0.0-beta.14', 'vue-daum-postcode':'^0.9.0', 'weekstart':'^1.0.1' }, 'devDependencies':{ '@babel/preset-env':'^7.12.11', '@babel/runtime-corejs3':'^7.12.5', '@nuxt/babel-preset-app':'^2.14.12', '@nuxtjs/eslint-config':'^3.1.0', '@nuxtjs/eslint-module':'^2.0.0', 'babel-eslint':'^10.1.0', 'babel-loader':'^8.2.2', 'core-js':'^3.8.2', 'eslint':'^7.10.0', 'eslint-config-prettier':'^6.12.0', 'eslint-plugin-nuxt':'^1.0.0', 'eslint-plugin-prettier':'^3.1.4', 'prettier':'^2.1.2' },  혹시나 제가 뭘 빠트린게 있을까요? 아니면 다른 파일들에서 추가적으로 해주어야 하는 일이 있는건가요? 주말에 질문드려서 죄송합니다. 편안한 주말되세요^^

Answer

Promise가 없는 것은 바벨로는 안 되고 폴리필을 추가해야 합니다. https://github.com/nuxt/nuxt.js/issues/480

Answer

늦은 시간에 답변 감사합니다!

답변보고 이것저것 해봤는데 정확히는 알 수 없지만 아무래도 짐작하기로 Promise가 문제인것 같은데

npm install es6-promise

설치하고 nuxt.config.js 파일에

bulid: {

transfile: ['es-promise']

}

처리했는데 빌드 100%쯤 되서 IE에서 'Promise'가 정의되지 않았습니다. 라는 에러가 발생하네요.

혹시 뭘 더 추가해 주어야 하는게 있을까요?

히나타

Nuxt 에 babel polyfill 적용하는 방법이 궁금합니다.

이 글과 비슷한 Q&A

api호출 제한이 안되는 질문에서 제로초님이 제공해주신 코드중에서의 질문입니다!

수강 기간 연장 부탁드립니다.

과제 답안

no offset 최적화를 사용할 수 없을 것 같은 경우에는 어떻게 최적화를 해야할까요?