IE 11 대응 [JavaScript 편]

IE11의 의미


아래 URL을 보면 레가시로 불리지만 2020년 11월까지 IE가 대응해야 하는 현실도 있다.
https://gs.statcounter.com/browser-market-share/desktop/japan/#monthly-201810-202010
데스크톱 IE는 2020년 11월까지 7.88%의 점유율을 차지했다.

(참고로 전 세계 모든 데스크톱 브라우저에서 IE의 점유율은 2.15%(2020년 11월까지)
사회에 IE도 사용된다.
IE11에서 JavaScript의 ES6는 일부만 해당합니다.
현대화 설치를 잘못하면 골치 아프기 때문에 Babel이라는 물건을 씁니다.

Babel


JavaScript 컴파일러.ES6 이후의 구문을 ES5 이전 형식으로 변환하거나 Type Script 컴파일링에 사용할 수 있습니다.
https://babeljs.io/
예를 들어, 다음 코드는 일반적으로 IE11에서 실행되지 않습니다.
IE11에서 ARO 함수가 대응하지 않기 때문입니다.
let hogefuga = ( hoge, fuga ) => {
        return console.log("ほげの出力:${hoge}");
//~~~~~~~~~~処理~~~~~~~~~~~~~~
        return console.log("ふがの出力:${fuga}");
//~~~~~~~~~~処理~~~~~~~~~~~~~~
  }
다음과 같이 ES5 형식을 자동으로 컴파일하는 것은 Babel입니다.
let hogefuga = function( hoge, fuga ){
        return console.log("ほげの出力:" + hoge);
//~~~~~~~~~~処理~~~~~~~~~~~~~~
        return console.log("ふがの出力:" + fuga);
//~~~~~~~~~~処理~~~~~~~~~~~~~~
  }
ES6 형식은 효율성이 좋고 할 수 있는 일도 많기 때문에 실현에 따라 (특히promise 등) 필수적이다.
너는 번역하는 것이 좋겠다.

Babel Polyfill


Polyfill을 사용하면 다양한 브라우저(IE11)에서 ES6 메모가 시작됩니다.
import "@babel/polyfill";

npm의 경우

npm install --save @babel/polyfill

상황

yarn add @babel/polyfill

독립 CDN의 경우


ES6 표기법을 사용하기 전에 다음과 같은 내용을 기술하십시오.
<script src="https://cdn.jsdelivr.net/npm/@babel/polyfill@latest/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@babel/standalone@latest/babel.min.js"></script>
<script type="text/babel" data-presets="env,stage-3" src="./js/main.js"></script>

좋은 웹페이지 즐겨찾기