IE 11 대응 [JavaScript 편]
4319 단어 브라우저 배경IE11JavaScript
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>
Reference
이 문제에 관하여(IE 11 대응 [JavaScript 편]), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/caperrine_dog/items/baedf9fcd486112872b8
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
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>
Reference
이 문제에 관하여(IE 11 대응 [JavaScript 편]), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/caperrine_dog/items/baedf9fcd486112872b8
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
import "@babel/polyfill";
npm install --save @babel/polyfill
yarn add @babel/polyfill
<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>
Reference
이 문제에 관하여(IE 11 대응 [JavaScript 편]), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/caperrine_dog/items/baedf9fcd486112872b8텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)