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

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

저는 바벨을 사용하여 ES6 자바스크립트 코드를 ES5로 컴파일하기 시작했습니다.Promise를 사용하기 시작하면 작동하지 않는 것처럼 보입니다.바벨 웹사이트는 폴리필을 통한 약속에 대한 지원을 명시하고 있습니다.

운이 따르지 않고 다음과 같이 추가하려고 했습니다.

require("babel/polyfill");

또는

import * as p from "babel/polyfill";

그러면 앱 부트스트래핑에서 다음 오류가 발생합니다.

'배벨/폴리필' 모듈을 찾을 수 없습니다.

모듈을 검색해봤는데, 근본적인 부분이 누락된 것 같습니다.오래되고 좋은 파랑새 NPM도 추가하려고 했는데 작동이 안 되는 것 같습니다.

바벨의 폴리필을 어떻게 사용합니까?

이것은 babel v6에서 약간 바뀌었습니다.

문서에서:

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

설치:
$ npm install babel-polyfill

/ / : 드노 / Browserify / 웹팩의사용:
폴리필을 포함하려면 응용프로그램의 진입점 맨 위에 폴리필이 있어야 합니다.
require("babel-polyfill");

브라우저 사용:
서사가에서 할 수 .dist/polyfill.js내철다하 합니다.babel-polyfill releasenpm 컴파일된 코드앞에 .이것은 컴파일된 모든 바벨 코드 앞에 포함되어야 합니다.하거나 컴일된코추다나포수있음함다습니할에거하가파에 시킬 수 .<script>전에

안 함: 사용 안 함require브라우징 등을 통해 이것을 사용합니다.babel-polyfill.

Babel 문서는 이를 매우 간결하게 설명합니다.

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

이렇게 하면 전체 ES6 환경을 에뮬레이트할 수 있습니다.이 폴리필은 바벨 노드 및 바벨/레지스터를 사용할 때 자동으로 로드됩니다.

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

▁like경과 같은 gulp-babel또는babel-loader 해야 합니다.babel패키지 자체가 폴리필을 사용합니다.

또한 글로벌 범위(폴리필 등)에 영향을 미치는 모듈의 경우 모듈에 사용되지 않는 변수가 발생하지 않도록 간결한 가져오기를 사용할 수 있습니다.

import 'babel/polyfill';

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

이 플래그를 지정하면 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@7에도 새로 추가됨)라는 바벨 구성 파일로 이동합니다.

// file: babel.config.js

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

   return { presets };
};

참조:

• 용도 #polyfill
• babel-polyfill #임시인노드-인증-웹팩
• babel-vlan-env#기본 제공 기능

---

2019년 8월 업데이트:

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

npm install --save core-js@3

항목 새목corejsconfig.jsbabel.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 를 참조: ▁see

참조:

• 7.4.0 출시: core-js 3, 정적 개인 방법 및 부분 적용
• core-js@3, 바벨과 미래 전망.

만약 당신의 소포라면.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를 .

import "babel/polyfill";

받는 사람:

import "babel-polyfill";

그리고 그것이 다른 어떤 것보다 먼저라는 것을 확실히.import문(응용 프로그램의 시작 지점에 반드시 있는 것은 아님).

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

먼저, 아무도 제공하지 않은 명백한 답변으로, Babel을 애플리케이션에 설치해야 합니다.

npm install babel --save

(또는)babel-core당신이 원하신다면require('babel-core/polyfill')).

외에도, 저는 제와 jsx를 저는 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 기능의 전체 집합을 사용할 수 있습니다.여기에는 Promise 및 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에 포함되었던 코어-js 및 재생기 런타임 라이브러리를 직접 사용하는 것이 좋습니다.

그래서 이것은 저에게 효과가 있었습니다.

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

그런 다음 초기 js 파일의 맨 위에 추가합니다.

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

언급URL : https://stackoverflow.com/questions/31122193/how-do-i-install-the-babel-polyfill-library