폴리 플루이드를 각도로 모듈화하는 방법은 무엇입니까?

Question

AngularJS 앱에서 사용하고 싶은 다양한 폴리 필/심이 있습니다.

예를 들어 classList은 IE9 이하 버전에서 지원되지 않습니다.

내 응용 프로그램에서 polyfills을 정의하는 두 가지 방법으로 시도했다 : 단순히 다른 모든 모듈이 정의되고 구성되는 것을 특징으로하는 내 app.js 페이지 상단에서 모든 polyfills을 배치하여

먼저.

angular.module('polyfills',[]); 
angular.module('polyfills') 
    .config([function() { 
     // all polyfills in here 
    }]); 

두 옵션 작업 :

둘째, 나는 이것을 시도했습니다. 그러나 두 옵션 모두 나에게 이상한 것 같습니다. 직관적으로 .config을 사용하면 제공자, 인터셉터 등을 구성해야하는 것처럼 느껴질 것입니다. 이는 이미 과거에 해결 된 문제 일 수 있으며 특정 사례에 대한 느낌이 들었습니다. 그 결과로

더 좋은 방법이 있나요?

Answer 1

폴리 모듈을 각진 모듈에 넣지 마십시오. 이상한 것이지 원하는 것이 아닙니다. 원하는 것은 각 브라우저의 js 구현이 동일하게 보이도록하기위한 것이므로 다른 js 리소스보다 먼저 polyfill을로드하십시오. polyfill을 포함하고 다른 js 파일보다 먼저 스크립트 태그에로드되는 js 파일을 만듭니다 (또는 각 polyfill을 자체 파일에 포함하려는 경우 더 많이 만듭니다). polyfills는 IIFE 안에 있어야합니다. 여기

는 Array.from위한 예시 polyfill (이 데모 상업적 매우 간단한 polyfill이다) 무엇 :

어레이로부터 - polyfill.js이어서

(function() { 
 
    'use strict'; 
 
    Object.defineProperty(Array, 'from', { 
 
    configurable: false, 
 
    enumerable: false, 
 
    value: function (object) { 
 
     'use strict'; 
 
     return [].slice.call(object); 
 
    } 
 
    }); 
 
})();

다음 태그를 index.html (또는 사용자가 최상위 템플릿이라고 부르는 것)에 넣으십시오. 앞에 다른 js 파일을 넣으십시오. 그렇습니다. 각도 또는 부트 스트랩 리소스 이전에도 가능합니다.

<script src="path/to/array-from-polyfill.js"></script> 

마지막 두주의 사항. 먼저, 항상 Object.defineProperty를 사용하고 'enumerable'을 false로 설정하십시오. 폴리곤을 픽업하기 위해 객체의 속성을 반복하는 특정 방법을 원한다면 그렇습니다. 즉, MDN의 폴리필 (polyfills)을 이용해야하지만, 괜찮습니다. 당신은 어쨌든 defineProperty 주위에 당신의 방법을 알고 있어야합니다.

둘째, 이미 브라우저에 해당 기능이 있어도 모든 브라우저에 폴리필을로드하는 것이 좋습니다. 기본적으로 실행 코드는 가능한 한 모든 곳에서 동일해야합니다. Polyfill을 사용하기 때문에 (또는 경우에 따라 다르므로) 특정 브라우저에서 버그가 발생하는 것을 더 짜증나게하는 것은 없습니다. 이것은 보편적 인 진리가 아니므로, 당신에게 맞는 것을하십시오.

polyfill이 테스트 환경에도로드되어 있는지 확인하고 polyfill을 폐기 할 수 있는지 정기적으로 확인하십시오.