blog

[Web] JavaScriptにおけるコンパイルとポリフィル

「Babelの目的は、コードを受け取り、ブラウザがまだサポートしていないかもしれない新しい機能を使用し、あなたが使いたいと思うブラウザが理解できるコードに変えることです。Compile and Fil...

Sep 4, 2020 · 5 min. read
シェア

サブタイトル:何が違うのか、なぜ重要なのか?

Scott Webb on Unsplash

(Photo by Silvio Kundt on Unsplash

"Babelのゴールは、あなたのコードを、ブラウザがまだサポートしていないかもしれない新しい機能を使って、あなたが使おうとするブラウザが理解できるコードに変えることです。"Tyler McGinnis"Compile and Populate"の中で述べています。

コンパイルされた JavaScript とは?

Babel、古いバージョンのJavaScriptと互換性を持たせるために、あなたのコードをコンパイルするために使用されます。

コンパイルとは、コンパイラが構文変換を行うことを意味しますが、新しいJavaScriptプリミティブを追加することはありません。

コードをコンパイルするということは、コードを変換するということです。

JavaScript ポリフィルとは何ですか?

ポリフィル追加するということは、あなたのJavaScriptコードに、以前には存在しなかったまったく新しい機能を追加するということです。

パディングは、通常のJavaScriptコードでは再現できない、JavaScriptに追加された新しい機能のために必要です。

ポリフィルは、グローバルJavaScript名前空間に追加された新しいプロパティに必要です。

いつ、どれを使うべきですか?

シンタックスとアトリビュートの違いです。例えば、arrow関数はシンタックスコンパイルされていますが、Array.fromはポリフィルです。

古いブラウザとの後方互換性を確保するために、パディングとコンパイルの両方が必要になることがよくあります。

どちらのアプローチも、モダンブラウザをサポートするES6の機能には必要ありませんが、JavaScriptの次の素晴らしい機能がリリースされたら、その新しい機能をコンパイルしたりポリフィルしたりする方法を知っておくことは良い習慣です。

接続詞

"きれいなコードをコンパイルし、きれいなプロパティを入力する" Dr. Derek Austin

例:充填またはコンパイル

アロー関数

Babelはfunctionキーワードによってアロー関数を通常の関数に変換することができます。

クラス

アロー関数のようなクラスは、通常の関数に変換することができるので、クラスをコンパイルすることもできます

Promises

デストラクチャリング

Babelはドット記法を使用して、すべての構造化オブジェクトを通常の変数に変換できるため、反構造的にコンパイルされます。

Includes

Includesはindexofを使用するように変換できますが、コンパイル時に新しいキーワード、属性、プリミティブは追加されないため、Includesに入力する必要があります

ビッグリスト:記入または編集

このリストには ES6 の機能のみが含まれており、flatMap のような新しい ECMAScript の機能は含まれていません。

コンパイル可能

  • アロー関数
  • 非同期関数
  • ブロック内の関数
  • クラス
  • クラス属性
  • 計算属性
  • 定数
  • 修飾子
  • デフォルトのパラメータ
  • デストラクチャリング
  • モジュール
  • オブジェクトの集約/拡張
  • 属性アクセスメソッド

ポリフィルの必要性

  • ArrayBuffer
  • Array.from
  • Array.of
  • Array#find
  • Array#findIndex
  • Fuction#name
  • Map
  • Number.isNan
  • Object.assign
  • Object.entries
  • Object.values
  • Promise
  • Set
  • String#includes
  • Symbol
  • WeakMap
  • WeakSet

:The fabulous Tyler McGinnisin his online courseModern Javascript, especiallythis lectureat 3:54.素晴らしいタイラー・マクギニスのオンラインコース「Modern Javascript」、特にこの講義の3:54。

覚えることが多すぎる?

JavaScriptで何か新しいプロパティやプリミティブが必要な場合、あなたはそれを入力する必要があることを知っています。

しかし、単純な構文糖への変更であれば、Babelのようなツールを使ってコンパイルすることができます。

迷ったら、やりたいこととTyler McGinnisキーワードでググってみてください。

その他のリソース

  • パディングとトランス詳しく説明します。
  • コンパイルを理解するには、公式役に立ちます。
  • 2010年に生み出しました:

ブラウザはひび割れのある壁だと考えてください。これらのポリフィルは亀裂を滑らかにし、ブラウザの壁を滑らかにします。

www.DeepL.com/Translator翻译 経由

Read next

DOM イベントとイベントデリゲート

DOM イベント\ndom オブジェクトは、ユーザーが一連のアクションに反応することを可能にします。\nマウスのクリック\nマウスのダブルクリック\nマウスの右クリック\nマウスダウン、マウスアップ、マウスダウン、マウスダウン\nページの読み込み\nキーボードの押下\n入力フィールドの変更\nキャプチャとバブリング\nドムの

Sep 4, 2020 · 2 min read