Cộng đồng Hỏi & Đáp của Inflearn

zungssam9813

câu hỏi đã được viết

Tạo Nodebird SNS với Vue

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

Viết

덕분에 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 에는 어떻게 적용해야 하는지...

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

감사합니다.

nodejsmysqlvuejsvuexawsssr

Câu trả lời 5

zerocho

Người chia sẻ kiến thức

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

build: {

transfile: [모듈]

}

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

zerocho

Người chia sẻ kiến thức

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

zungssam9813

Người đặt câu hỏi

답변주신 내용 참고해서 이리저리 해보다보니 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]) {
                const envTargets = {
                    client: { browsers: ['last 2 versions'], 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": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint:js": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "lint": "npm run lint: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"
  },