Vue IE 브라우저에서 동작안하는 이슈 / SCRIPT1002 구문오류

사내에서 사용하는 vue로 만들어진 프로젝트가 IE에서 동작하지 않는다는 이슈가 있었습니다.
이미 배포된 버전에서는 콘솔창에 SCRIPT1002가 찍혔고 상세내용을 눌러보다 빌드된 파일이다보니까 생각보다 이슈를 파악하기 어려웠습니다.

local에서 프로젝트 띄우기

그래서 local에서 프로젝트를 띄우고서 확인하였습니다.

역시나 구문오류가 찍히네요.
상세내용을 보니, node_modules/yallist에서 에러가 발생하는 것을 알 수 있습니다.

문제의 라이브러리 검색하기!!

yallist는 어디서 사용하고 있는 라이브러리인지 검색을 해보겠습니다.
package.json에는 없는 라이브러리이지만, package-lock.json파일을 보면 여러 라이브러리에서 사용되는 것을 확인할 수 있습니다.

해결방법은 (webpack3기준) ??

IE에서만 동작을 안하는 이슈이다보니 babel을 통해 es5로 변환이 안된다고 유추할 수 있습니다.
그러면, node_modules내에 있는 파일도 babel을 통해 변환을 하려면 어떻게 해야할까요??
바로, webpack설정시에 babel-loader를 modules에 선언하는 부분이 있는데요,
여기에 추가하면 됩니다.

modules: {
  rules: [
       {
        test: /\.(j|t)sx?$/,
        loader: "babel-loader",
        include: [
          ...
         resolve("node_modules/yallist"), 
         resolve("node_modules/lru-cache")
          
        ],
        options: {
        // env는 브라우저에 필요한 ecmascript 버전을 자동으로 파악해서 알아서 polyfill을 넣어줍니다
          presets: ["env", "stage-2"] 
        }
      },
  ]
}

babel-loader로 node_modules에 변환할 라이브러리를 include에 선언을 해줍니다.
그리고 options객체를 꼭 추가해줘야 합니다.
.babelrc 있다면 해당 파일을 먼저 참조 하며, 없다면, options에 부여한 plugin을 참조합니다.
(그러나 프로젝트내에 .babelrc파일이 있어도 참조가 안되서 따로 추가해주었습니다.)