この記事では、プラグインポリフィルについて考えることなく、最新のECMAScript機能を使用するのに役立つAutopolyfillerツールについて説明したいと思います。
残念ながら、すべてのユーザーが最新のブラウザーを使用するわけではなく、多くの場合、コードの読みやすさを犠牲にするか、ポリフィルを使用してすべてのブラウザーを多かれ少なかれ均等化し、クロスブラウザーコードを記述する必要があります。
この状況を修正する方法はいくつかあります。
ダッシュとアンダースコア
これは、今日のブラウザを「修正」するかなり一般的な方法です。さらに、lodashはデータを操作するための便利な機能を多数提供します。 さらに、基本クラスのプロトタイプを「善のために」変更することをまだ恐れている開発者の神経を保護することができます。
_.chain([1, 2, 3, 4]) .map(function (item) { return item * item; }) .filter(function (item) { return item < 9; }) .value();
個人的には、lodashによってコードが「うるさい」ため、私はそれが好きではありません。 しかし、これは皆のビジネスです。
es5shim
es5shimは、ES5仕様で承認されているほとんどすべての欠落機能を修復します 。 es5-shim.jsファイルを含めるだけで、EcmaScript 5のほぼすべての利点を自由に使用できます 。
[1, 2, 3, 4] .map(function (item) { return item * item; }) .filter(function (item) { return item < 9; });
そのようなコードは確かにずっときれいに見えます。
polyfill.io
ポイントは非常に簡単です。 クライアントのブラウザの
User-Agent
ヘッダーに基づいて動的に生成されたスクリプトをHTMLコードに含め、破損したすべてを修復します。
<script src="//polyfill.io"></script>
（本番環境ではこのリンクを使用しないでください）
この方法は非常に興味深いものですが、コードで使用されていないものすべてにパッチが適用されます。 さらに、誰かがスクリプトを動的に生成することを好まないかもしれませんが、非常に安全ではありませんが、北のキャッシングWebを使用する場合は非常に安価です（他の人のキャッシングプロキシを参照）。
ポリフィルプロジェクト自体 。
オートポリフィラー
以前のJavaScriptの修復方法には重大な欠点があります。 彼らはあなたに考えさせます。 より正確には、サポートされているブラウザーのバージョンを考慮して、コードのすべての依存関係を個別に解決します（いくつかの追加スクリプトを接続します）。 または、wwwの現実を破るかもしれません。 そして、それが多くの開発者がすべてのes5shim（特別なアセンブリなし）を含み、IE8のサポートを拒否した後にそれを無効にすることを恐れている理由です（そして何が壊れるかわかりません）。 プロジェクトは不必要な依存関係で徐々に大きくなり、これらの依存関係を一掃するのは非常に苦痛です。
または、ES5で使用されるすべてのメソッドを保存する何らかの種類のファイルを作成できます。 また、コードに新しいメソッドを追加する場合、サポートされているブラウザーのすべてのバージョンを考慮して、このファイルを展開します。 このリストを使用して、es5shimのカスタムアセンブリを取得できます。 しかし、ブラウザをアップグレードしたら、使用した方法を削除したらどうでしょうか？ スクリプトを書くには？ 一般的に、石鹸で縫います。
反対側から見ると、コードは依存関係のリストとまったく同じファイルです。このリストは明示的ではありません：
[1, 2, 3, 4] .map(function (item) { return item * item; }) .filter(function (item) { return item < 9; });
このコードはES5の2つの関数
Array.prototype.map
と
Array.prototype.filter
使用していることを簡単に理解できます。
ロボットにコード内の依存関係を見つけるように教えるだけで十分で、必要なポリフィルのみでコードを自動的に「パッチ」できます。 大きな利点は、この依存関係のリスト自体がクリアされ、コードの変更に応じて展開されることです。
この単純なアイデアから、Autopolyfillerプロジェクトが生まれました。 既にお気づきのように、その名前はAutoprefixerに似ていますが 、 Autoprefixerは同じ原則を公言しますが、CSSに関してです。
Autopolyfillerのアルゴリズムは非常に簡単です。
-プロジェクトがサポートするブラウザのリストを定義します（これは必須ではありません）
-コードにオートポリフィラーをフィード
-AutopolyfillerはASTを解析し、ES *メソッドを見つけます
-ブラウザーのリストを使用して不要なメソッドを削除します
-ポリフィルでコードを取得します
JavaScriptはインタープリター言語であるため、Autopolyfillerは非常に極端な場合に見逃す可能性があります。
-このコードでは
$('div').map()
は
Array.prototype.map
を見つけ
Array.prototype.map
。
-このコード
eval('Object.keys(this)')
およびこのコード
Object['k' + 'eys']()
では、何も見つかりません。
しかし、奇妙なことをせず、evalに似た構造を使用しない場合、その精度は非常に高くなります。
Autopolyfillerは、安全でクロスブラウザで安定したポリフィル（ES6以外）のみをサポートします。これらは、ポリフィルのオープンな「データベース」から取得されます。 ただし、自分で簡単に拡張できます。
コンソールユーティリティとAPIに加えて、 Gulp 、 Grunt 、 Enbのタスクが現在作成されています。 そのため、今日の組立工程にオートポリフィラーを簡単にねじ込むことができます。 まだ疑問がある場合は、 デモをお試しください！
参照：
-GithubのAutopolyfillerプロジェクト
-Autopolyfillerコード品質
-Autopolyfillerデモ
すべての質問にお答えできることを嬉しく思います。