[바벨&웹팩] IE, Safari에서 Javascript가 작동하지 않았던 이유

최종 배포까지 완료했는데, IE와 Safari에서 javascript가 작동하지 않아 시작하기 버튼이 눌리지 않았다.

 

문제 원인

1. 웹팩에서 바벨 설정값으로 번들링할 때 target값을 구버전까지 명시하지 않았던 점

2. 정규표현식을 바벨이 es5코드로 변환하지 못했던 점

 

1번 해결책

세 가지 파일에서 수정이 필요하다.

 

1) .babelrc

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": "> 0.25%, not dead",
        "useBuiltIns": "entry",
        "corejs": 3,
        "debug": true
      }
    ]
  ],
  "plugins": [["@babel/plugin-transform-runtime", { "corejs": 3 }]]
}

targets부분에 명시된 코드는 현재 점유율이 0.25%인 이상인 브라우저는 모두 지원하게 변환하라는 코드다.

 

2) webpack.config.js

module.exports = {
  entry: ["core-js/stable", "regenerator-runtime/runtime", ENTRY_FILE],
  target: ["web", "es5"],
};

 

3) package.json

{
"browserslist": "defaults"
}

 

2번 해결책

정규식 리터럴 객체를 허용하는 RegExp 생성자가 모든 브라우저에서 지원되는 게 아니였다.

다른 정규표현식을 사용했다.