ポリフィル - フィラーですか、それともぽっかり開いた穴ですか? (パート-1)

数日前、組織の Teams チャットで次のような優先メッセージを受け取りました: セキュリティの脆弱性が見つかりました - Polyfill JavaScript が検出されました - 高。
状況を説明すると、私は大手銀行会社に勤めていますが、ご存知のとおり、銀行とセキュリティの脆弱性は大きな敵のようなものです。そこで私たちは問題を徹底的に調査し始め、数時間で解決しました。これについては後で説明します。しかし、良かった (または最悪?) 点は、最初にこの問題についてグーグル検索したときに、表示された検索結果に一日中夢中になったことです。

最新のブラウザと従来のブラウザの間の相違点を強調してみましょう。ここでは、最新の Chrome リリースと Internet Explorer (IE) 9 の比較を示します。最新のブラウザは、ES6 の多くの機能をサポートしていますが、同時に、多くの企業で依然として使用されている IE9 と IE11 は、ES6 の機能をほとんどサポートしていません。 。
ここでは、トランスパイル の概念を支援します。JavaScript のコンテキストでは、最新の JavaScript (ES6/ES2015 以降) で書かれたソース コードを ES5 などの古いバージョンに変換することを指します。 、古いブラウザで広くサポートされています。非常に人気のあるトランスパイラーは Babel です。これは、構文変換、コード バンドル (Webpack とともに)、JSX のサポート (私たちの友人である React!) などの幅広い機能を提供します。

現在、最新の構文が多数存在する場所ではトランスパイラーの使用が非常に一般的であり、さまざまな環境間での互換性を確保する必要があります。コードベース全体を別のバージョンに変換するには、非常に時間がかかり、ビルド プロセスや Babel などの追加構成のセットアップも必要になることに注意してください。構文機能の変換に加えて、古いブラウザーで同じ機能の複製を拡張するための API 機能もカバーされていることは言うまでもありません。

Babel のリファレンスに戻ると、Babel は多くのパッケージで構成されており、ES6 クラスやアロー関数などを同等の JS コードに変換するなど、さまざまな種類の機能用のプラグインを提供しています。この中には、独自の「polyfill」パッケージも提供されています。

Polyfill は、古いブラウザがネイティブに提供しない、新しいブラウザ バージョンで表示される同じ/ほぼ同じ JS 機能を提供できるようにするコードの一部です。 ここに簡単なビデオ例と非常に簡単な実装を示します。

ここで、トランスパイラーとポリフィルの違いは何だろうと考える人もいるかもしれません。ポリフィルは、トランスパイラによってコードベース全体を古いブラウザに優しいバージョンに変更するのではなく、欠落している特定の API をエミュレートすることに重点を置いています。これにより、よりきめ細かなアプローチが可能になり、もちろん効率とパフォーマンスも向上します。

これは、ポリフィルについて、これを書いているまさにその瞬間まで私が 1 日夢中になった理由の要点に到達するのに十分な背景を提供するはずです。

現在、Babel には babel/polyfill というパッケージがあり、core-js と regenerator-runtime の 2 つのライブラリで構成されています。最初は、このパッケージをインポートすると、すべてのポリフィルが動作します。

import '@babel/polyfill';

しかし、プロジェクトで使用するかどうかに関係なく、すべてを取り込むとバンドルのサイズが大きくなり、グローバルにポリフィルを注入するとオブジェクトの競合が発生する可能性があります。
これによりパッケージの非推奨が決まり、Babel では
によって core-js ライブラリを直接使用することを推奨しています。 ステップ 1: Babel 構成を変更する

{
  "presets": [
    ["@babel/preset-env", {
      "useBuiltIns": "usage",
      "corejs": 3
    }]
  ]
}

ステップ 2: プロジェクトで使用するポリフィルを手動でインポートします

import "core-js/es/array/includes";
import "core-js/es/promise";

これにより、メモリが節約され、不要なコードが削減されます。

これで 1 つの部分は終了です。それ自体はそれほど心配するものではありませんが、依存関係の変更を最新の状態に保ち、顧客により良いエクスペリエンスを提供するというプロジェクトに関しては間違いなく重要です。

しかし。これだけではありません。

私たちは、最近発生し、インターネット全体を震撼させ、コードベースを精査させた大規模な攻撃について話そうとしています。
そして、これには私たちがここで議論したことが含まれています。それでは、第 2 部をお楽しみに!

以上がポリフィル - フィラーですか、それともぽっかり開いた穴ですか? (パート-1)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。