Babel 7とWebpack 4ビデオコースをチェックする：
https://www.udemy.com/course/web-development-html5-css3-php-oop-and-mysql-database/?referralCode=2C5DD5C44FA59413D0CD
次のレベルへあなたのJavaScriptスキルをアップします。
https://www.udemy.com/course/javascript-boost/?referralCode=06AF8499F008CC241201
Babel は、主に ECMAScript 2015+ コードを現在および古いブラウザまたは環境における JavaScript の下位互換バージョンに変換するために使用するツール チェーンです。 ECMAScript 2015+ は ES6+ に相当します。
Babel はトランスレーターと考えることができます。 ES6+ JS は、私たちに多くの新しい機能と構文を提供します。 それらは私たちの開発効率を驚異的に向上させることができます。 しかし、現時点では、これらの新機能のほとんどは、ブラウザでは認識できません。
私たちプログラマーは ES6+ でコードを書き、それをブラウザが理解できるコードに翻訳するよう Babel に依頼します。 ES6+ はまた、Promise、Map、Object.assign() など、多くの新しい API を追加しました。 新しい API とは、新しいオブジェクト、プロパティ、およびメソッドを意味します。 APIは単なるファンシーな名前です。 それに脅かされることはありません。 これらを扱うには、ES5にこれらのAPIを追加する必要がある。 この仕事は、Babelのアシスタントが行います。 このアシスタントが誰であるかは後ほど紹介します。
では、この結論を覚えておいてください。
まず Babel の公式サイトに行って Docs ボタンをクリックする。
Babel は構文変換を処理します。 Polyfill は不足している機能を処理します。 Babel のアシスタントは polyfill です。
ES6+ の翻訳以外に、Babel は JSX と TypeScript も扱うことができます。 そこで、もうひとつのコンセプト、プリセットが登場します。 プリセットは、Babel が使用する翻訳です。
これで、Babel の 2 つの重要な概念、preset と polyfill を学びました。
次に、Babel をインストールしましょう。 よく見ると、実際には 4 つのパッケージがインストールされており、3 つは開発用依存パッケージ、1 つは本番用依存パッケージとなっていることがわかります。
- npm install – save-?dev @babel/core
- npm install @babel/cli
- npm install @babel/preset-env
- npm install – save @babel/polyfill
Babel/core.B>
Babel/cli はコマンドラインインターフェイスです。 babel と通信するために使用します。
Babel 自体は ES6 コードを翻訳する方法を知らないのです。 そのため、プラグインにその方法を教えてもらう必要があります。 プラグインはたくさんあります。 一つ一つインストールして設定するのは手間のかかる作業です。 そこで、babel presetを使うのが一番です。 プリセットとは、プラグインの集合体です。 私たちが使っているプリセットはpreset-env.です。
Babel/preset-env はBabel 7でES6+からES5へトランスレートするのに標準採用されているものです。 Babel 7 では、preset-env は preset-2015/6/7 などに取って代わりました。
Babel/polyfill は ES6+ 機能を ES5 に追加するためのものです。
新しい構文は、ES6 と ES5 の唯一の違いではありません。 ES6 はすでに多くの新しい API を受け取っています。 API とは、組み込みオブジェクトの空想上の名前に過ぎません。 これらの新しい組み込みオブジェクトは非常に便利ですが、問題はそれらが ES5 環境に存在しないことです。
唯一の解決策は、これらの組み込みオブジェクトを ES5 環境に追加することです。
まず、ターミナルを起動し、プロジェクトのルートディレクトリを作成します。
次に、Babelの公式マニュアルから4つのインストールコマンドをコピーしてターミナルに貼り付けます。
インストールが完了すると、これら4つのパッケージがインストールされていることが確認できるはずです。
VSC でプロジェクトを開いてパッケージを確認しましょう。json.
Cli, core, および preset-env は開発用の依存関係で、polyfill は量産用の依存関係です。
polyfill はソースコードと考えることができます。 ES6のすべての新機能のソースが格納されています。
ES5 + polyfill = ES6.
Babel を使う前に、設定する必要があるのですが、その設定方法について教えてください。
Babel 6 では、設定情報を .babelrc または package.json に保存します。
Babel 7 では、新しいソリューションとして babel.config.js.
Babel のマニュアルでは babel.config.js を作成するためのテンプレートが提供されています。
最初に、オブジェクトをエクスポートするモジュールを作成する必要があります。
そして、その中にプリセットプロパティを定義する。 プリセットの値は配列です。
その中に、別の配列を配置します。
子配列の最初の要素は、使用したいプリセットを指定します。 ここでは、@babel/env または @babel/preset-env に設定しています。
2番目の要素は config オブジェクトです。 その中には、targets と useBuiltIns という 2 つのプロパティがあります。 Targetsはブラウザの設定、useBuiltInsはポリフィルの設定です。
Now, we have installed and configured Babel.
続いて、テストをしてみましょう。
プロジェクトのルートディレクトリに、es6.jsというファイルを作成します。
そしてターミナルをつけてbabelコマンド：npx babel es6.js.js を入力します。
ES6 let は ES5 var に変換されました。
NPX babel は node_modules/.NET と同じものです。bin/babel
さて、最初の ES6 ファイルの “Babeled” に成功しました。
翻訳したファイルを独立したファイルとして出力したい場合があるかもしれません。
-o と – output-file は一度に一つのファイルだけを翻訳することが可能です。 実際の開発では、1 つのディレクトリに ES6 ファイルを格納し、そのディレクトリ内のすべてのファイルを翻訳したい場合があります。
たとえば、プロジェクトのルート ディレクトリに、2 つの子ディレクトリを作成します。 ES6 と ES5 です。 ES6 ファイルを ES6 ディレクトリに書き込みます。 それから、それらを dir ES5 に「バベル」します。 HTMLファイルはdir es5からJSファイルをリンクします。
この場合、npx babel ES6 -d ES5 または npx babel ES6 – out-dir ES5 というコマンドを使用する必要があります。
さて、dir ES6 のすべてのファイルは dir ES5 に “babeled” されます。
次に、ポリフィルで何ができるかを紹介します。
これはバベル化したいファイルです:
これは ES5 では存在しない ES6 API をたくさん使用しています。 ES5 環境で動作するようにする唯一の方法は、これらの新しい API のソース コードを ES5 環境に追加することです。 これがpolyfillの目的であり、polyfillがproduction dependencyとしてインストールされる理由でもあります。
ここで、なぜポリフィルが必要なのかを理解するために、あまり正確ではない例えを紹介します。 私たちの jQuery プログラムを直接実行することはできません。 まず、jQuery のソース コードにリンクする必要があります。 PolyfillはリンクするjQueryソースコードです。
これは私たちが入手した「バベル付き」ES5ファイルです：
これらすべての必須ファイルを見てください。 これらは polyfill によって読み込まれます。 しかし、「babeled」ファイルはHTMLファイルから直接利用することができません。 webpackを使ってバンドルする必要があるのです。 しかし、必要な「API ソース コード」はすべて読み込まれています。
この設定は babel.config.js の useBuiltIns proeprty によって制御されています。 このプロパティには、usage、false、entry の 3 つの値があります。
usage は最適で最もよく使用される値です。
used 以外に、useBuiltIns は false と entry の 2 つの値を持っています。 これは、必要な API を手動でリンクする必要があることを意味します。 これは、必要な API を手動でリンクしなければならないことを意味します。
エントリを使用する場合、”require” する必要があります。 ファイルの冒頭に @babel/polyfillEntry を記述してください。 すると、babelはまずtargetsプロパティをチェックして、対象となるブラウザが何であるかを把握します。 そして、ターゲットブラウザがサポートしていないAPIを全て読み込みます。
So in summary, set useBuiltIns to usage and Babel will take care of the rest for you.
Check out our FULL Babel 7 and Webpack 4 Course at Udemy:
https://www.udemy.com/course/web-development-html5-css3-php-oop-and-mysql-database/?referralCode=MDM_BABEL_P
Check out our Full web development course at Udemy:
https://www.udemy.com/course/web-development-html5-css3-php-oop-and-mysql-database/?referralCode=2C5DD5C44FA59413D0CD