babel-polyfillライブラリをインストールするにはどうすればよいですか？

ES6のJavaScriptコードをES5にコンパイルするためにBabelを使い始めました。Promiseの使用を開始すると、機能していないようです。BabelのWebサイトには、ポリフィルによる約束のサポートが記載されています。

運がなければ、私は追加しようとしました：

require("babel/polyfill");

または

import * as p from "babel/polyfill";

これにより、アプリのブートストラップ時に次のエラーが発生します。

モジュール 'babel / polyfill'が見つかりません

モジュールを検索しましたが、基本的なことをここで見逃しているようです。また、古くて良いブルーバードNPMを追加しようとしましたが、機能していないようです。

バベルのポリフィルの使用方法は？

これは、Babel v6で少し変更されました。

ドキュメントから：

ポリフィルは完全なES6環境をエミュレートします。このポリフィルは、バベルノードを使用すると自動的に読み込まれます。

インストール：
$ npm install babel-polyfill

Node / Browserify / Webpackでの使用：ポリフィル
を含めるには、アプリケーションへのエントリポイントの上部でポリフィルを要求する必要があります。
require("babel-polyfill");

ブラウザーでの使用： npmリリース内
のdist/polyfill.jsファイルから使用できますbabel-polyfill。これは、コンパイルされたすべてのBabelコードの前に含める必要があります。コンパイルしたコードの前に追加するか、または<script> beforeに。

注：requirebrowserifyなどを使用してこれを行わないでくださいbabel-polyfill。

バベルのドキュメントはかなり簡潔にこれを説明します。

Babelには、カスタムの再生器ランタイムとcore.jsを含むポリフィルが含まれています。

これにより、完全なES6環境がエミュレートされます。このポリフィルは、babel-nodeおよびbabel / registerを使用すると自動的にロードされます。

他のものが呼び出される前に、アプリケーションのエントリポイントでそれが必要であることを確認してください。webpackのようなツールを使用している場合、それはかなり簡単になります（バンドルに含めるようにwebpackに指示できます）。

gulp-babelまたはのようなツールを使用している場合は、ポリフィルを使用babel-loaderするためにbabelパッケージ自体もインストールする必要があります。

また、グローバルスコープに影響を与えるモジュール（ポリフィルなど）の場合は、簡潔なインポートを使用して、モジュール内で未使用の変数が存在しないようにすることができます。

import 'babel/polyfill';

Babelバージョン7の場合、@ babel / preset-envを使用している場合、ポリフィルを含めるには、バベル構成にフラグ「useBuiltIns」を「usage」の値で追加するだけです。アプリのエントリポイントでポリフィルを要求またはインポートする必要はありません。

このフラグを指定すると、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 };
};

参照：

• usage＃polyfill
• babel-polyfill＃usage-in-node-browserify-webpack
• 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

新しいエントリcorejsがbabel.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、バベル、そして未来への展望

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文を変更する必要があり、エラーメッセージが表示さ：

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')、他のすべてのモジュールローダーステートメントも必要であり、インポートを使用しないことを確認します-2つを混在させないでください。つまり、起動スクリプトにインポート文がある場合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は非推奨であるため、直接core-jsとregenerator-runtimeを使用することをお勧めします、以前は@ babel / polyfillに含まれていたライブラリを。

だからこれは私のために働きました：

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

次に、初期のjsファイルの最上部に追加します。

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