babel-polyfill 라이브러리를 어떻게 설치합니까?

방금 Babel을 사용하여 ES6 자바 스크립트 코드를 ES5로 컴파일하기 시작했습니다. 약속을 사용하기 시작하면 작동하지 않는 것 같습니다. Babel 웹 사이트는 polyfill을 통한 약속 지원을 명시합니다.

운이 없다면 나는 다음을 추가하려고 시도했다.

require("babel/polyfill");

또는

import * as p from "babel/polyfill";

이를 통해 앱 부트 스트랩에서 다음과 같은 오류가 발생합니다.

'babel / polyfill'모듈을 찾을 수 없습니다

모듈을 검색했지만 여기에 근본적인 부분이 빠져있는 것 같습니다. 또한 오래되고 좋은 블루 버드 NPM을 추가하려고 시도했지만 작동하지 않는 것 같습니다.

바벨의 폴리 필을 사용하는 방법?

이것은 babel v6에서 약간 변경되었습니다.

문서에서 :

폴리 필은 전체 ES6 환경을 에뮬레이트합니다. 이 폴리 필은 babel-node를 사용할 때 자동으로로드됩니다.

설치:
$ npm install babel-polyfill

Node / Browserify / Webpack에서의 사용법 : polyfill
을 포함하려면 응용 프로그램의 진입 점 상단에 polyfill이 필요합니다.
require("babel-polyfill");

브라우저에서의 사용법 : npm 릴리스 내의 파일에서
사용 가능합니다 . 컴파일 된 모든 Babel 코드 앞에 포함시켜야합니다. 컴파일 된 코드 앞에 추가하거나 앞에 포함시킬 수 있습니다.dist/polyfill.jsbabel-polyfill<script>

참고 : require이것을 browserify 등을 통해 사용 하지 마십시오 babel-polyfill.

바벨의 문서는 매우 간결이 설명 :

Babel에는 사용자 정의 재생기 런타임 및 core.js가 포함 된 폴리 필이 포함되어 있습니다.

전체 ES6 환경을 에뮬레이트합니다. 이 폴리 필은 babel-node 및 babel / register를 사용할 때 자동으로로드됩니다.

다른 항목을 호출하기 전에 응용 프로그램의 시작점에 필요한지 확인하십시오. webpack과 같은 도구를 사용하는 경우 매우 간단 해집니다 (웹팩에 번들에 포함하도록 지시 할 수 있음).

gulp-babel또는 과 같은 도구 를 사용하는 경우 polyfill을 사용하려면 패키지 자체를 babel-loader설치해야합니다 babel.

또한 전역 범위 (폴리 필 등)에 영향을주는 모듈의 경우, 모듈에 사용되지 않은 변수가 없도록하기 위해 간결한 가져 오기를 사용할 수 있습니다.

import 'babel/polyfill';

Babel 버전 7의 경우 @ babel / preset-env를 사용하는 경우 polyfill을 포함하려면 babel 구성에서 'usage'값으로 'useBuiltIns'플래그를 추가하면됩니다. 앱의 진입 점에서 폴리 필을 요구하거나 가져올 필요가 없습니다.

이 플래그를 지정하면 babel @ 7이 최적화하고 필요한 폴리 필 만 포함합니다.

설치 후이 플래그를 사용하려면 다음을 수행하십시오.

npm install --save-dev  @babel/core @babel/cli @babel/preset-env
npm install --save @babel/polyfill

간단히 플래그를 추가하십시오.

useBuiltIns: "usage" 

"@ babel / env"섹션 아래의 "babel.config.js"라는 babel 구성 파일 (Babel @ 7에도 새로 추가됨)에

// file: babel.config.js

module.exports = () => {
   const presets = [
      [
         "@babel/env", 
         { 
             targets: { /* your targeted browser */ },
             useBuiltIns: "usage"  // <-----------------*** add this
         }
      ]
   ];

   return { presets };
};

참고:

• 사용법 #polyfill
• babel-polyfill # usage-in-node-browserify- 웹팩
• babel-preset-env # usebuiltins

2019 년 8 월 업데이트 :

Babel 7.4.0 (2019 년 3 월 19 일) 릴리스에서는 @ babel / polyfill이 더 이상 사용되지 않습니다. @ babe / polyfill을 설치하는 대신 core-js를 설치합니다.

npm install --save core-js@3

corejsbabel.config.js에 새로운 항목 이 추가됩니다

// file: babel.config.js

module.exports = () => {
   const presets = [
      [
         "@babel/env", 
         { 
             targets: { /* your targeted browser */ },
             useBuiltIns: "usage",
             corejs: 3  // <----- specify version of corejs used
         }
      ]
   ];

   return { presets };
};

예를 참조하십시오 : https://github.com/ApolloTang/stackoverflow-eg--babel-v7.4.0-polyfill-w-core-v3

참고:

• 7.4.0 출시 : core-js 3, 정적 개인 메소드 및 부분 애플리케이션
• core-js @ 3, babel 및 미래에 대한 살펴보기

package.json이 다음과 같은 경우

  ...
  "devDependencies": {
    "babel": "^6.5.2",
    "babel-eslint": "^6.0.4",
    "babel-polyfill": "^6.8.0",
    "babel-preset-es2015": "^6.6.0",
    "babelify": "^7.3.0",
  ...

그리고 Cannot find module 'babel/polyfill'오류 메시지가 나타나면 아마도 import 문을 FROM으로 변경해야합니다.

import "babel/polyfill";

에:

import "babel-polyfill";

그리고 다른 import진술 보다 먼저 나오는지 확인하십시오 (응용 프로그램의 시작점에 반드시있는 것은 아님).

참조 : https://babeljs.io/docs/usage/polyfill/

첫째, 아무도 제공하지 않은 확실한 대답은 응용 프로그램에 Babel을 설치해야합니다.

npm install babel --save

(또는 babel-core대신 원하는 경우 require('babel-core/polyfill')).

그 외에도 es6 및 jsx를 빌드 단계로 변환하는 지저분한 작업이 있습니다 (즉 babel/register, 사용하고 싶지 않기 babel/polyfill때문에 처음부터 직접 사용하려고하는 이유입니다 ). @ssube의 대답 에서이 부분을 더 강조하십시오.

다른 항목을 호출하기 전에 응용 프로그램의 시작점에서 요구해야합니다.

babel/polyfill공유 환경 시작 파일에서 요구하려고하는 이상한 문제가 발생하여 사용자가 참조 한 오류가 발생했습니다. 지금. 어쨌든 import 'babel/polyfill'클라이언트와 서버 시작 스크립트 모두에서 첫 번째 줄로 이동 하면 문제가 해결되었습니다.

대신 사용하려는 경우 require('babel/polyfill')다른 모든 모듈 로더 문도 필요하고 가져 오기를 사용하지 않아야합니다. 두 가지를 혼합하지 마십시오. 다시 말해, 시작 스크립트에 import 문이있는 경우 스크립트 import babel/polyfill에서 첫 줄을 작성하십시오 require('babel/polyfill').

babel-polyfill을 사용하면 구문 변경 이외의 모든 ES6 기능을 사용할 수 있습니다. 여기에는 Promises 및 WeakMap과 같은 새로운 내장 객체와 같은 기능과 Array.from 또는 Object.assign과 같은 새로운 정적 메소드가 포함됩니다.

babel-polyfill이 없으면 babel은 화살표 기능, 구조 해제, 기본 인수 및 ES6에 도입 된 기타 구문 별 기능과 같은 기능 만 사용할 수 있습니다.

https://www.quora.com/What-does-babel-polyfill-do

https://hackernoon.com/polyfills-everything-you-ever-wanted-to-know-or-maybe-a-bit-less-7c8de164e423

Babel이 문서 에서 말했듯이 Babel> 7.4.0의 경우 @ babel / polyfill 모듈 은 더 이상 사용되지 않으므로 이전에 @ babel / polyfill에 포함 된 core-js 및 재생기 런타임 라이브러리를 직접 사용하는 것이 좋습니다 .

그래서 이것은 나를 위해 일했습니다 :

npm install --save core-js@3.6.5
npm install regenerator-runtime

그런 다음 초기 js 파일의 맨 위에 추가하십시오.

import 'core-js/stable';
import 'regenerator-runtime/runtime';