メインコンテンツにスキップ

@babel/polyfill

危険

🚨 Babel 7.4.0 以降、このパッケージは非推奨となり、代わりに `core-js/stable` を直接含めること (ECMAScript の機能をポリフィルするため) が推奨されます。

JavaScript
import "core-js/stable";

ジェネレーターまたは async 関数を ES5 にコンパイルしていて、`@babel/core` または `@babel/plugin-transform-regenerator` のバージョンが `7.18.0` より古い場合は、`regenerator runtime` パッケージもロードする必要があります。これは、`@babel/preset-env` の `useBuiltIns: "usage"` オプションまたは `@babel/plugin-transform-runtime` を使用すると自動的にロードされます。

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

これは完全な ES2015+ 環境 (Stage 4 より前の提案は含まず) をエミュレートし、ライブラリ/ツールではなくアプリケーションで使用することを目的としています。(このポリフィルは `babel-node` を使用すると自動的にロードされます)。

つまり、`Promise` や `WeakMap` などの新しい組み込み、`Array.from` や `Object.assign` などの静的メソッド、`Array.prototype.includes` などのインスタンスメソッド、ジェネレーター関数を使用できます (ただし、regenerator プラグインを使用する場合)。このポリフィルは、これを行うためにグローバルスコープと `String` などのネイティブプロトタイプに追加されます。

インストール​

npm install --save @babel/polyfill
情報

これはポリフィル (ソースコードの前に実行される) であるため、`devDependency` ではなく `dependency` である必要があります。

サイズ​

ポリフィルは便宜のために提供されていますが、`@babel/preset-env` と `useBuiltIns` オプション を使用して、必ずしも必要ではないポリフィル全体を含めないようにする必要があります。それ以外の場合は、個々のポリフィルを手動でインポートすることをお勧めします。

TC39 の提案​

Stage 4 ではない提案を使用する必要がある場合、`@babel/polyfill` はそれらを自動的にインポートしません。別のポリフィル (たとえば、`core-js`) から個別にインポートする必要があります。近い将来、`@babel/polyfill` に別々のファイルとして含めるように取り組む可能性があります。

Node / Browserify / Webpack での使用方法​

ポリフィルを含めるには、アプリケーションの**エントリポイント**の先頭で require する必要があります。

他のすべてのコード/require ステートメントよりも前に呼び出されていることを確認してください!

JavaScript
require("@babel/polyfill");

アプリケーションの**エントリポイント**で ES6 の `import` 構文を使用している場合は、代わりに**エントリポイント**の先頭でポリフィルをインポートして、ポリフィルが最初にロードされるようにする必要があります。

JavaScript
import "@babel/polyfill";

webpack を使用する場合、ポリフィルを含めるには複数の方法があります。

  • `@babel/preset-env` と共に使用する場合、

    • `.babelrc` で `useBuiltIns: 'usage'` が指定されている場合は、`webpack.config.js` のエントリ配列にもソースにも `@babel/polyfill` を含めないでください。ただし、`@babel/polyfill` はインストールされている必要があります。

    • `.babelrc` で `useBuiltIns: 'entry'` が指定されている場合は、上記のように `require` または `import` を介して、アプリケーションのエントリポイントの先頭に `@babel/polyfill` を含めます。

    • `.babelrc` で `useBuiltIns` キーが指定されていないか、`useBuiltIns: false` と明示的に設定されている場合は、`webpack.config.js` のエントリ配列に直接 `@babel/polyfill` を追加します。

webpack.config.js
module.exports = {
  entry: ["@babel/polyfill", "./app/js"],
};
  • `@babel/preset-env` を使用しない場合は、上記のように webpack のエントリ配列に `@babel/polyfill` を追加します。`import` または `require` を介してアプリケーションのエントリポイントの先頭に追加することもできますが、これは推奨されません。
注意

ポリフィル全体を直接インポートすることはお勧めしません。`useBuiltIns` オプションを試すか、必要なポリフィルのみを手動でインポートしてください (このパッケージまたは他の場所から)。

ブラウザでの使用方法​

`@babel/polyfill` npm リリースの `dist/polyfill.js` ファイルから入手できます。これは、コンパイルされたすべての Babel コードの**前**に含める必要があります。コンパイルされたコードの先頭に追加するか、その前の `<script>` に含めることができます。

注意: browserify などを使用して require しないでください。`@babel/polyfill` を使用してください。

詳細​

ヒント

ツール/ライブラリで使用するためにグローバルを変更しないものを探している場合は、`transform-runtime` プラグインを確認してください。これは、`Array.prototype.includes` のように上記で述べたインスタンスメソッドを使用できないことを意味します。

注: 実際に使用する ES2015 メソッドによっては、`@babel/polyfill` またはランタイムプラグインを使用する必要がない場合があります。使用している特定のポリフィル (たとえば、`Object.assign`) のみをロードするか、ライブラリがロードされる環境に特定のポリフィルを含める必要があることを文書化するだけでよい場合があります。