web-dev-qa-db-ja.com

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

ES6のJavaScriptコードをES5にコンパイルするためにBabelを使い始めました。私が約束を使い始めるとき、それはそれが働いていないように見えます。 BabelのWebサイトには、ポリフィルによる約束の支持が記載されています。

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

require("babel/polyfill");

または

import * as p from "babel/polyfill";

それで、私は私のアプリのブートストラップで以下のエラーを得るでしょう：

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

モジュールを検索しましたが、ここに基本的なものがいくつか欠けているようです。私はまた古くて良いbluebird NPMを追加しようとしました、しかしそれはそれが機能していないように見えます。

Babelのポリフィルを使用する方法？

javascriptnode.jsbabeljspolyfillsbabel-polyfill
130
Shlomi Sasson

これはbabel v6では少し変わった。

ドキュメントから：

Polyfillは完全なES6環境をエミュレートします。このpolyfillはbabel-nodeを使うときに自動的にロードされます。

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

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

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

注：browserifyなどでこれをrequireしないでください。babel-polyfillを使ってください。

65
vdclouis

Babelのドキュメント はこれをかなり簡潔に説明しています。

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

これは完全なES6環境をエミュレートします。このpolyfillは、babel-nodeとbabel/registerを使うときに自動的にロードされます。

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

gulp-babelやbabel-loaderのようなツールを使っているのなら、polyfillを使うためにbabelパッケージ自体もインストールする必要があります。

また、グローバルスコープに影響を与えるモジュール（polyfillsなど）では、モジュール内に未使用の変数が含まれないように簡潔なインポートを使用できます。

import 'babel/polyfill';
48
ssube

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'エラーメッセージが表示されたら、おそらくインポートステートメントをFROMから変更する必要があります。

import "babel/polyfill";

に：

import "babel-polyfill";

そして、それが他のimportステートメントの前にくるようにしてください（必ずしもアプリケーションの入り口にあるとは限りません）。

参照： https://babeljs.io/docs/usage/polyfill/

19
l3x

Babelバージョン7の場合、@ babel/preset-envを使用している場合、polyfillをインクルードするには、babel設定に 'use'の値を持つ 'useBuiltIns'フラグを追加するだけです。アプリのエントリポイントでポリフィルを要求したりインポートしたりする必要はありません。

このフラグを指定すると、babel @ 7は最適化し、必要なポリフィルのみを含めます。

インストール後にこのフラグを使用するには

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

フラグを追加するだけです。

useBuiltIns: "usage"

"babel.config.js"という名前のbabel設定ファイル（これもBabel @ 7の新機能）の "@ babel/env"セクションに：

// file: babel.config.js

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

   return { presets };
};

参照：

9
apollo

まず、誰も提供していないという明白な答えは、あなたのアプリケーションにBabelをインストールする必要があるということです。

npm install babel --save

（代わりにrequire('babel-core/polyfill')を使いたい場合はbabel-core）。

それ以外にも、私はes6とjsxをビルドステップとして書き換えるという面倒な作業があります（つまり、最初からbabel/registerを直接使用しようとしていないのはbabel/polyfillを使用したくない） @ ssubeの回答のこの部分をもっと強調したいのですが。

他のものが呼び出される前に、アプリケーションへの入り口で必ずそれを必要とするようにしてください。

共有環境のスタートアップファイルからbabel/polyfillを要求しようとしていて、ユーザーが参照しているエラーが発生したという奇妙な問題に遭遇しました。今再現する。とにかく、import 'babel/polyfill'を私のクライアントとサーバー両方のスタートアップスクリプトの最初の行に移動することで問題は解決しました。

代わりにrequire('babel/polyfill')を使用したい場合は、他のすべてのモジュールローダーステートメントも必須でインポートを使用しないようにします。この2つを混在させないでください。つまり、起動スクリプトにimportステートメントがある場合は、require('babel/polyfill')ではなくimport babel/polyfillをスクリプトの最初の行にします。

9
ChetPrickles

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

8
zloctb