www.yuque.com/xiezhongfu/…

@babel/polyfill

더 많은 내용 참조:babeljs.io/docs/en/bab…
Babel 7.4.0부터 이 가방은 이미 유행이 지났습니다. 원본 코드는corejs와regenerator를 직접 도입했습니다.
그림 원본 주소:github.com/babel/babel…

응용 코드에서 사용할 수 있으면 도구 라이브러리는 사용하지 말아야 한다(@babel/plugin-transform-runtime 소개)

ES6+ 환경 시뮬레이션(Stage 0/1/2/3 제외)

프로그램의 입구에 추가, 일로영일

각prototype에poliyfill방법을 첨가하면 전역오염

진화 방안

@babel/preset-env+useBuiltIns(아래 설명)

당신이 필요로 하는polyfill 패키지를 수동으로 가져옵니다

총 2개의 대안이 있는데 첫 번째 방안을 추천합니다. 첫 번째 방안은 사실 두 번째 방안의 자동화 버전입니다.어떻게 자동화합니까?실행 목표 환경에 따라 어떤 polyfill 패키지가 필요한지 자동으로 선택합니다.구체적으로 보시오.

@babel/preset-env

더 많은 내용 참조:babeljs.io/docs/en/pre… babeljs.io/docs/en/bab…
@babel/preset-env는 일부 강압적인 프로젝트를 기반으로 한다:browserslist,compat-table,electron-to-chromium,......@babel/preset-env 설정된 목표 환경에 자동으로 맞는 js 기능, Babel 변환 플러그인(stage-0/1/2/3 플러그인 포함하지 않음), corejs의poliyfill.자동 어댑터는 선택적인 전체 국면을 오염시킬 수 있다. 물론 흑백을 가리지 않고 모두 ES5로 전환할 수도 있다. 구체적인 참조:babeljs.io/docs/en/bab…
웹 패키지에서 @babel/preset-env를 사용자 정의하는 방법을 알고 @babel/preset-env +useBuiltIns가 @babel/polyfill을 대체하는 설정을 알아야 합니다.

시나리오 1

설치 @babel/polyfill

네.babelrc에서 설정useBuiltIns: 'usage'

시나리오 2

설치 @babel/polyfill

응용 입구에 @babel/polyfill

도입

네.babelrc에서 설정useBuiltIns: 'entry'

시나리오 3

설치 @babel/polyfill

네.babelrc에서 설정 useBuiltIns: 'false', 기본 동작

웹팩 설정 입구에 @babel/polyfill

추가

@babel/plugin-transform-runtime

더 많은 내용 참조:babeljs.io/docs/en/bab… github.com/babel/babel…

용어 해석

helper: 예를 들어 Babel 사용extend 함수는 한 대상의 속성을 다른 대상에 복사합니다. 여기의extend는 helper입니다.
앞의 두 가지 기술 방안이 있는데 왜 @babel/plugin-transform-runtime가 나올까요?

전체를 오염시키고 싶지 않아

도구 라이브러리에서 사용하고 싶어요

기본 helper 함수는 필요한 파일에서 한 번씩 성명되거나 정의되어 낭비될 뿐만 아니라 크로스 파일 지원도 불가능하다

#babel/plugin-transform-runtime는 샌드박스 환경을 제공합니다. 일부 고버전 js 특성을 사용할 때corejs를 가리키며 전체 국면을 오염시키지 않습니다. 그러나prototype에서polyfill을 하지 않았기 때문에 일부 고버전 js의 실례적인 방법은 사용할 수 없습니다. 예를 들어 Array.prototype.includes.
@babel/plugin-transform-runtime는 모든 helper 함수를 @babel/runtime 구성 요소로 가리키며 공간을 절약하고 파일 지원을 뛰어넘어 통일된 관리를 편리하게 합니다.이것도 @babel/runtime에 미리 설치해야 합니다.

프로비저닝

에 있습니다.babelrc 프로필에 기본 인자가 있는 설정

{
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "absoluteRuntime": false,
        "corejs": false,
        "helpers": true,
        "regenerator": true,
        "useESModules": false
      }
    ]
  ]
}

corejs

"corejs": false 이 기본 매개 변수를 보면 @babel/plugin-transform-runtime는 모든polyfill을 사용자가 제공해야 한다고 가정합니다:
그림 출처:github.com/babel/babel…
요약:

corejs를 3으로 설정하려면 @babel/runtime-corejs3

를 미리 설치해야 합니다.

corejs를 2로 설정하려면 @babel/runtime-corejs2

를 미리 설치해야 합니다.

corejs를false로 설정하려면 @babel/runtime

를 미리 설치해야 합니다.

absoluteRuntime

Babel은 기본적으로 node 에서modules는 설정된 @babel/runtime 버전을 불러옵니다.absoluteRuntime 매개 변수는 이 기본 행동을 수정하는 것입니다. @babel/runtime를 어디서 불러올지 구체적으로 지정할 수 있습니다.
기타 설정 항목의 설명 참조:babeljs.io/docs/en/bab…
전재 대상:https://juejin.im/post/5d2d3a1ee51d4510aa0115aa