babel 폴리필 다운로드 - babel 폴리필 소스 코드 다운로드

바벨 폴리필

컴파일된 코드에 다양한 전략을 사용하여 다양한 폴리필을 주입할 수 있는 Babel 플러그인 세트입니다. 또한 이 저장소에는 다른 폴리필에 대한 공급자를 만드는 데 도움이 되는 패키지가 포함되어 있습니다.

이 저장소는 babel/babel#10008에서 처음 제안된 내용을 구현합니다.

몇 가지 빠른 설정 예제를 찾고 있거나 구성을 마이그레이션하는 방법을 알고 싶다면 docs/migration.md 확인하세요.

용법

기본 Babel 패키지는 JavaScript 구문 만 변환합니다. 기본 기능 ( Array.prototype.flat ) 또는 내장 객체 ( Reflect )가 이전 브라우저에서 작동하도록 하려면 폴리필도 로드해야 합니다.

가장 쉬운 방법은 ">

 < script src =" https://unpkg.com/[email protected]/minified.js " >  script >

그러나 이 간단한 접근 방식에는 잠재적으로 불필요한 코드가 많이 포함될 수 있습니다. 이 저장소에 구현된 Babel 플러그인은 실제로 필요한 것만 로드하려고 시도하면서 코드에 폴리필을 자동으로 주입합니다. 이는 컴파일 대상과 코드에서 사용 중인 항목을 기반으로 수행됩니다.

이러한 플러그인("폴리필 공급자"라고 함)은 귀하의 요구에 더 잘 맞도록 다양한 주입 방법을 지원합니다.

예를 들어 누락된 함수를 전역 개체에 추가하여 es-shims 폴리필에 가져오기를 주입하려는 경우 Babel을 다음과 같이 구성할 수 있습니다.

 구성  입력 코드  출력 코드 
{
  "targets" : { "firefox" : 65 },
  "plugins" : [
    [ " polyfill-es-shims " , {
      "method" : " usage-global "
    }]
  ]
}
 Promise . allSettled ( [
  p1 ,
  p2
] ) . finally ( ( ) => {
  console . log ( "Done!" ) ;
} ) ;  {
  console.log("Done!");
});"> import "promise.prototype.finally/auto" ;
import "promise.allsettled/auto" ;

Promise . allSettled ( [
  p1 ,
  p2
] ) . finally ( ( ) => {
  console . log ( "Done!" ) ;
} ) ; 더 많은 구성 예제를 보려면 마이그레이션 문서( docs/migration.md 를 확인하세요.
 이러한 플러그인이 지원하는 모든 옵션에 대해 읽고 싶다면 사용법 문서( docs/usage.md 를 확인하세요.
 지원되는 폴리필
 폴리필  플러그인  행동 양식
 core-js@2  babel-plugin-polyfill-corejs2  entry-global , usage-global 및 usage-pure 있습니다.
 core-js@3  babel-plugin-polyfill-corejs3  entry-global , usage-global 및 usage-pure 있습니다.
 es-shims  babel-plugin-polyfill-es-shims  usage-global 및 usage-pure
 regenerator-runtime  babel-plugin-polyfill-regenerator  entry-global , usage-global 및 usage-pure 있습니다. 우리는 core-js 및 es-shims 에 대한 지원을 유지하고 있지만 여러분 자신의 폴리필이나 선호하는 폴리필을 위한 공급자를 구현하는 것이 좋습니다! 우리의 목표 중 하나는 다양한 폴리필 간의 경쟁을 장려하여 사양 준수 및 코드 크기와 같은 다양한 절충안의 균형을 더 잘 맞추는 것입니다.
 사용자 정의 폴리필에 대한 지원을 구현하려면 @babel/helper-define-polyfill-provider 사용할 수 있습니다. ( docs/polyfill-provider.md .) 
 주입 방법
 Polyfill 플러그인은 세 가지 주입 방법( entry-global , usage-global 및 usage-pure 을 노출할 수 있습니다. 폴리필 플러그인은 필요한 패키지를 종속성에 자동으로 추가하지 않으므로 package.json 에 명시적으로 나열해야 합니다.
 모든 예에서는 Chrome 62를 대상으로 한다고 가정합니다.
 entry-global 방법은 전체 폴리필에 대한 단일 단순 가져오기를 대상 환경에서 지원하지 않는 특정 기능에 대한 가져오기로 대체합니다. Babel로 컴파일하는 코드에서 사용하는 내용에 관계없이 지원되지 않는 모든 기능을 사용할 수 있는지 확인하려는 경우 가장 유용합니다. 다음과 같은 경우 이 방법을 사용할 수 있습니다.
 종속성을 컴파일하지는 않지만 필요한 폴리필이 모두 있는지 확인하고 싶습니다.
 Babel의 감지 논리는 어떤 기능을 사용하고 있는지 이해할 만큼 똑똑하지 않습니다.
 코드가 변경될 때 다시 생성할 필요 없이 모든 폴리필이 포함된 단일 번들 파일을 원합니다.
 입력 코드  출력 코드 
 import "core-js" ;  import "core-js/modules/es7.array.flat-map.js" ;
import "core-js/modules/es6.array.sort.js" ;
import "core-js/modules/es7.promise.finally.js" ;
import "core-js/modules/es7.symbol.async-iterator.js" ;
import "core-js/modules/es7.string.trim-left.js" ;
import "core-js/modules/es7.string.trim-right.js" ;
import "core-js/modules/web.timers.js" ;
import "core-js/modules/web.immediate.js" ;
import "core-js/modules/web.dom.iterable.js" ;
 usage-global 메서드는 전역 범위에 연결된 폴리필에 가져오기를 주입하지만 코드에서 사용되는 지원되지 않는 기능에 대해서만 적용됩니다. 다음과 같은 경우 이 방법을 사용할 수 있습니다.
 코드 크기를 가능한 한 작게 유지하고 효과적으로 사용되는 것만 포함해야 합니다.
 폴리필은 단일 진입점을 지원하지 않지만 각 기능은 별도로 로드되어야 합니다.
 입력 코드  출력 코드 
 foo . flatMap ( x => [ x , x + 1 ] ) ;
bar . trimLeft ( ) ;
arr . includes ( 2 ) ;  [x, x + 1]);
bar.trimLeft();
arr.includes(2);"> import "core-js/modules/es.array.flat-map.js" ;
import "core-js/modules/es.array.unscopables.flat-map.js" ;
import "core-js/modules/es.string.trim-start.js" ;

foo . flatMap ( x => [ x , x + 1 ] ) ;
bar . trimLeft ( ) ;
arr . includes ( 2 ) ;
 usage-pure 메서드는 폴리필을 전역 범위에 연결하지 않고 일반 함수로 가져오는 방식으로 코드에서 사용되는 지원되지 않는 기능에 대한 가져오기를 폴리필에 주입합니다. 다음과 같은 경우 이 방법을 사용할 수 있습니다.
 당신은 라이브러리 작성자이며 로드 중인 폴리필로 전역 범위를 "오염"시키고 싶지 않습니다.
 입력 코드  출력 코드 
 foo . flatMap ( x => [ x , x + 1 ] ) ;
bar . trimLeft ( ) ;
arr . includes ( 2 ) ;  [x, x + 1]);
_trimLeftInstanceProperty(bar).call(bar);
arr.includes(2);"> import _flatMapInstanceProperty from "core-js-pure/stable/instance/flat-map.js" ;
import _trimLeftInstanceProperty from "core-js-pure/stable/instance/trim-left.js" ;

_flatMapInstanceProperty ( foo ) . call ( foo , x => [ x , x + 1 ] ) ;
_trimLeftInstanceProperty ( bar ) . call ( bar ) ;
arr . includes ( 2 ) ; 
 역사와 동기
 지난 3년 반 동안 @babel/preset-env 지원되는 구문 기능을 트랜스파일하지 않을 뿐만 아니라 불필요한 core-js 폴리필을 포함하지 않음으로써 번들 크기를 줄이는 데 있어 모든 잠재력을 보여주었습니다.
 지금까지 Babel은 소스 코드에 core-js 폴리필을 삽입하는 세 가지 방법을 제공했습니다.
 @babel/preset-env 의 useBuiltIns: "entry" 옵션을 사용하면 대상 브라우저에서 기본적으로 지원하지 않는 모든 ECMAScript 기능에 대해 자체 설치 폴리필을 주입할 수 있습니다.
 @babel/preset-env 의 useBuiltIns: "usage" 사용하면 Babel은 지원되지 않는 ECMAScript 기능에 대한 자체 설치 폴리필만 주입하지만 입력 소스 코드에서 실제로 사용되는 경우 에만 적용됩니다.
 @babel/plugin-transform-runtime 사용하면 Babel은 core-js 에서 지원하는 모든 사용된 ECMAScript 기능에 대해 "순수한" 폴리필(자체 설치와 달리 전역 범위를 오염시키지 않음)을 주입합니다. 이는 일반적으로 라이브러리 작성자가 사용합니다.
 우리의 기존 접근 방식에는 두 가지 주요 문제가 있습니다.
 @babel/plugin-transform-runtime 은 완전히 별개의 패키지이기 때문에 "순수한" 폴리필과 함께 @babel/preset-env 의 targets 옵션을 사용할 수 없습니다.
 우리는 사용자가 Babel 통합을 원할 경우 core-js 사용하도록 강요했습니다. core-js 는 훌륭하고 포괄적인 폴리필이지만 모든 사용자의 요구 사항에 맞지는 않습니다.
 이 새로운 패키지를 통해 우리는 이전 버전과의 호환성을 유지하면서 이 두 가지 문제에 대한 솔루션을 제안하고 있습니다.
 기여하고 싶나요?
 저장소 설정을 시작하려면 CONTRIBUTING.md를 참조하세요.

구성	입력 코드	출력 코드
{ "targets" : { "firefox" : 65 }, "plugins" : [ [ " polyfill-es-shims " , { "method" : " usage-global " }] ] }	Promise . allSettled ( [ p1 , p2 ] ) . finally ( ( ) => { console . log ( "Done!" ) ; } ) ;	{ console.log("Done!"); });"> import "promise.prototype.finally/auto" ; import "promise.allsettled/auto" ; Promise . allSettled ( [ p1 , p2 ] ) . finally ( ( ) => { console . log ( "Done!" ) ; } ) ;

폴리필	플러그인	행동 양식
`core-js@2`	`babel-plugin-polyfill-corejs2`	`entry-global` , `usage-global` 및 `usage-pure` 있습니다.
`core-js@3`	`babel-plugin-polyfill-corejs3`	`entry-global` , `usage-global` 및 `usage-pure` 있습니다.
`es-shims`	`babel-plugin-polyfill-es-shims`	`usage-global` 및 `usage-pure`
`regenerator-runtime`	`babel-plugin-polyfill-regenerator`	`entry-global` , `usage-global` 및 `usage-pure` 있습니다.

입력 코드	출력 코드
import "core-js" ;	import "core-js/modules/es7.array.flat-map.js" ; import "core-js/modules/es6.array.sort.js" ; import "core-js/modules/es7.promise.finally.js" ; import "core-js/modules/es7.symbol.async-iterator.js" ; import "core-js/modules/es7.string.trim-left.js" ; import "core-js/modules/es7.string.trim-right.js" ; import "core-js/modules/web.timers.js" ; import "core-js/modules/web.immediate.js" ; import "core-js/modules/web.dom.iterable.js" ;

입력 코드	출력 코드
foo . flatMap ( x => [ x , x + 1 ] ) ; bar . trimLeft ( ) ; arr . includes ( 2 ) ;	[x, x + 1]); bar.trimLeft(); arr.includes(2);"> import "core-js/modules/es.array.flat-map.js" ; import "core-js/modules/es.array.unscopables.flat-map.js" ; import "core-js/modules/es.string.trim-start.js" ; foo . flatMap ( x => [ x , x + 1 ] ) ; bar . trimLeft ( ) ; arr . includes ( 2 ) ;

입력 코드	출력 코드
foo . flatMap ( x => [ x , x + 1 ] ) ; bar . trimLeft ( ) ; arr . includes ( 2 ) ;	[x, x + 1]); _trimLeftInstanceProperty(bar).call(bar); arr.includes(2);"> import _flatMapInstanceProperty from "core-js-pure/stable/instance/flat-map.js" ; import _trimLeftInstanceProperty from "core-js-pure/stable/instance/trim-left.js" ; _flatMapInstanceProperty ( foo ) . call ( foo , x => [ x , x + 1 ] ) ; _trimLeftInstanceProperty ( bar ) . call ( bar ) ; arr . includes ( 2 ) ;