Babeljs-quick-guide

提供：Dev Guides
移動先:案内、検索

BabelJS-概要

*BabelJS* は、新しい機能を古い標準に変換するJavaScriptトランスパイラーです。 これにより、新旧両方のブラウザで機能を簡単に実行できます。 オーストラリアの開発者、セバスチャン・マッケンジーはBabelJSを始めました。

BabelJSを選ぶ理由

JavaScriptは、ブラウザが理解できる言語です。 Chrome、Firefox、Internet Explorer、Microsoft Edge、Opera、UCブラウザーなど、さまざまなブラウザーを使用してアプリケーションを実行します。 ECMAスクリプトはJavaScript言語仕様です。 ECMA Script 2015 ES5は、すべての新旧ブラウザーで正常に動作する安定したバージョンです。

ES5の後、ES6、ES7、およびES8ができました。 すべてのブラウザで完全にサポートされていない多くの新機能を備えたES6がリリースされました。 ES7、ES8、およびESNext（ECMAスクリプトの次のバージョン）にも同じことが当てはまります。 現在、すべてのブラウザがリリースされたすべてのESバージョンと互換性を持つことが可能になるかどうかは不明です。

ES6またはES7またはES8の機能を使用してコードを記述する場合、新しい変更のサポートが不足しているため、一部の古いブラウザーでは破損する傾向があります。 したがって、コードでECMAスクリプトの新機能を使用し、使用可能なすべてのブラウザーで実行する場合、ES5で最終コードをコンパイルするツールが必要です。 

*Babel* は同じことを行い、必要なECMAスクリプトバージョンのコードをトランスパイルするトランスパイラーと呼ばれます。 プリセットやプラグインなどの機能があり、コードを変換するために必要なECMAバージョンを構成します。 Babelを使用すると、開発者はJavaScriptの新機能を使用してコードを記述できます。 ユーザーは、Babelを使用してコードを変換できます。コードは後で問題なくブラウザで使用できます。

次の表に、ES6、ES7、およびES8で使用可能な機能を示します-

Features ECMA Script version
Let + Const ES6
Arrow Functions ES6
Classes ES6
Promises ES6
Generators ES6
Iterators ES6
Modules ES6
Destructuring ES6
Template Literals ES6
Enhanced Object ES6
Default, Rest & Spread Properties ES6
Async - Await ES7
Exponentiation Operator ES7
Array.prototype.includes() ES7
String Padding ES8

BabelJSは、次の2つの部分を管理します-

  • トランスパイリング
  • ポリフィリング

Babel-Transpilerとは何ですか？

Babel-transpilerは、最新のJavaScriptの構文をフォームに変換します。これは、古いブラウザーでも簡単に理解できます。 たとえば、矢印function、const、letクラスはfunction、varなどに変換されます。 ここで、構文、つまり矢印関数は、両方の場合で機能を同じに保ちながら通常の関数に変換されます。

Babel-polyfillとは何ですか？

Promise、Maps、Includeなどの新しい機能がJavaScriptに追加されています。 この機能はアレイで使用できます。同様に、使用してbabelを使用してトランスパイルしても変換されません。 新しい機能がメソッドまたはオブジェクトである場合、Babel-polyfillとトランスパイルを使用して、古いブラウザーで機能させる必要があります。

JavaScriptで利用可能なECMAスクリプト機能のリストを次に示します。これらの機能は、変換およびポリフィルできます-

  • クラス
  • デコレータ
  • Const
  • モジュール
  • 破壊する
  • デフォルトのパラメーター
  • 計算されたプロパティ名
  • オブジェクトのレスト/スプレッド
  • 非同期関数
  • 矢印関数
  • 残りのパラメーター
  • スプレッド
  • テンプレートリテラル

ポリフィル可能なECMAスクリプト機能-

  • 約束
  • Map
  • Set
  • シンボル
  • 弱マップ
  • 弱点
  • 含む
  • Array.from、Array.of、Array＃find、Array.buffer、Array＃findIndex
  • Object.assign、Object.entries、Object.values

BabelJSの機能

このセクションでは、BabelJSのさまざまな機能について学習します。 以下はBabelJSの最も重要なコア機能です-

Babel-Plugins

プラグインとプリセットは、Babelがコードをトランスパイルするための設定の詳細です。 Babelは、コードが実行される環境がわかっている場合、個別に使用できる多数のプラグインをサポートしています。

バベルプリセット

Babelプリセットはプラグインのセットです。つまり、Babelに特定のモードでトランスパイルするように指示するbabel-transpilerの構成詳細です。 コードを変換する環境を持つプリセットを使用する必要があります。 たとえば、_es2015_プリセットはコードを_es5_に変換します。

バベルポリフィル

メソッドやオブジェクトのようないくつかの機能がありますが、これらは変換できません。 このような場合、babel-polyfillを使用して、任意のブラウザーで機能の使用を促進できます。 約束の例を考えてみましょう。この機能が古いブラウザで機能するには、ポリフィルを使用する必要があります。

バベルポリフィル

Babel-cliには、コマンドラインでコードを簡単にコンパイルできる一連のコマンドが付属しています。 また、コマンドとともに使用するプラグインやプリセットなどの機能も備えており、一度にコードを簡単に変換できます。

BabelJSを使用する利点

このセクションでは、BabelJSの使用に関連するさまざまな利点について学習します-

  • BabelJSは、JavaScriptに新しく追加されたすべての機能との下位互換性を提供し、任意のブラウザーで使用できます。
  • BabelJSには、ES6、ES7、ESNextなど、JavaScriptの次のバージョンを取り込むためにトランスパイルする機能があります。
  • BabelJSは、gulp、webpack、flow、react、typescriptなどとともに使用できます。 それを非常に強力にし、開発者の生活を楽にする大きなプロジェクトで使用することができます。
  • BabelJSは、react JSX構文と連携して動作し、JSX形式でコンパイルできます。
  • BabelJSはプラグイン、ポリフィル、babel-cliをサポートしており、大きなプロジェクトでの作業が簡単になります。

BabelJSを使用することの欠点

このセクションでは、BabelJSを使用することのさまざまな欠点について学習します-

  • BabelJSコードはトランスパイリング中に構文を変更するため、本番環境でリリースされるとコードが理解しにくくなります。
  • 変換されたコードは、元のコードと比較するとサイズが大きくなります。
  • すべてのES6/7/8または今後の新機能をトランスコンパイルできるわけではなく、古いブラウザーで動作するようにポリフィルを使用する必要があります。

以下は、babeljs [[1]]

コンパイラ

BabelJS-環境設定

このセクションでは、BabelJSの環境を設定する方法を学びます。

BabelJSを使用するには、次のセットアップが必要です-

  • NodeJS
  • Npm
  • Babel-CLI
  • バベルプリセット
  • コードを書くためのIDE

NodeJS

nodejsがシステムにインストールされているかどうかを確認するには、ターミナルで node –v と入力します。 これは、現在システムにインストールされているnodejsのバージョンを確認するのに役立ちます。

Nodejs

何も印刷されない場合は、システムにnodejsをインストールします。 nodejsをインストールするには、nodejsのホームページhttps://nodejs.org/en/download/にアクセスし、OSに基づいてパッケージをインストールします。

次のスクリーンショットは、nodejsのダウンロードページを示しています-

ダウンロード

OSに基づいて、必要なパッケージをインストールします。 nodejsがインストールされると、npmも一緒にインストールされます。 npmがインストールされているかどうかを確認するには、ターミナルで npm –v と入力します。 npmのバージョンが表示されます。

コマンド

BabelJS-CLI

Babelには、コマンドラインインターフェイスが組み込まれており、コードのコンパイルに使用できます。

作業するディレクトリを作成します。 ここで、_babelproject_というディレクトリを作成しました。 nodejsを使用してプロジェクトの詳細を作成しましょう。

以下に示すように、_npm init_を使用してプロジェクトを作成しました-

Npm Init

作成したプロジェクト構造は次のとおりです。

プロジェクト構造

次に、Babelを使用するには、以下に示すようにBabel cli、Babelプリセット、Babelコアをインストールする必要があります-

バベルクリ

次のコマンドを実行してbabel-cliをインストールします- 

npm install --save-dev babel-cli

Babel Cli

バベルプリセット

次のコマンドを実行してbabel-presetをインストールします- 

npm install --save-dev babel-preset-env

Babel Preset

バベルコア

次のコマンドを実行してbabel-coreをインストールします- 

npm install --save-dev babel-core

Babel Core

インストール後、ここにpackage.jsonで利用可能な詳細があります-

プロジェクトのローカルにbabelプラグインをインストールしました。 これは、プロジェクトの要件および異なるバージョンのbabeljsに基づいて、プロジェクトでbabelを異なる方法で使用できるようにするためです。 Package.jsonは、使用されるbabeljsのバージョンの詳細を提供します。

私たちのプロジェクトでbabelを使用するには、次のようにpackage.jsonで同じものを指定する必要があります-

Package Json

Babelは主にJavaScriptコードをコンパイルするために使用されますが、これには後方互換性があります。 次に、ES6→ ES5またはES7→ ES5、ES7→ ES6などでコードを記述します。

実行中にBabelに指示を提供するには、ルートフォルダーに.babelrcというファイルを作成する必要があります。 以下に示すように、プリセットの詳細を含むjsonオブジェクトが含まれています-

Json Object

JavaScriptファイルindex.jsを作成し、Babelを使用してes2015にコンパイルします。 その前に、次のようにes2015プリセットをインストールする必要があります-

es2015のインストール

index.jsでは、es6に追加された新しい機能であるarrow関数を使用して関数を作成しました。 Babelを使用して、es5にコードをコンパイルします。

Js_Index

es2015に実行するには、次のコマンドが使用されます- 

npx babel index.js

出力

es2015出力

上記のように、es5のindex.jsコードが表示されます。

次のようにコマンドを実行することにより、ファイルに出力を保存できます- 

npx babel index.js --out-file index_es5.js

出力

実行

ここに作成したファイル、index_es5.jsがあります-

作成されたインデックス

BabelJS-ES6コード実行

*BabelJS* は、JavaScriptに追加された新機能をES5に変換するか、指定されたプリセットまたはプラグインに基づいて反応するJavaScriptトランスパイラーです。 ES5はJavaScriptの最も古い形式の1つであり、問​​題なく新しいブラウザーと古いブラウザーで実行することがサポートされています。 このチュートリアルのほとんどの例では、コードをES5にトランスコンパイルしました。

矢印関数、クラス、プロミス、ジェネレーター、非同期関数などの多くの機能を見てきました。 ES6、ES7、およびES8に追加されました。 新しく追加された機能のいずれかが古いブラウザーで使用されると、エラーがスローされます。 BabelJSは、古いブラウザーとの下位互換性があるコードのコンパイルを支援します。 ES5は問題なく古いブラウザーで完全に正常に動作することがわかりました。 したがって、プロジェクト環境の詳細を考慮すると、古いブラウザーで実行する必要がある場合は、プロジェクトの新しい機能を使用し、babeljsを使用してコードをES5にコンパイルし、問題なくブラウザーを使用できます。

これを理解するために、次の例を考えてみましょう。

例

<!DOCTYPE html>
<html>
   <head>
      <title>BabelJs Testing</title>
   </head>
   <body>
      <script type="text/javascript" src="index.js"></script>
   </body>
</html>

index.jsファイル

var _foo = () => {
   return "Hello World"
};

alert(_foo());

出力

上記のHTMLをChromeブラウザで実行すると、次の出力が得られます-

Chromeブラウザ

FirefoxでHTMLを実行すると、次の出力が生成されます-

生成

そして、同じHTMLがInternet Explorerで実行されると、次の構文エラーが生成されます-

Internet Explorer

ES6 Arrow関数を使用しました。上記のように、同じことがすべてのブラウザで機能するわけではありません。 これを機能させるために、コードをES5にコンパイルしてすべてのブラウザーで使用するBabelJSがあります。

babeljsを使用してjsファイルをes5にコンパイルし、ブラウザーで再度チェックします。

Compile es5

HTMLファイルでは、以下に示すようにindex_new.jsを使用します- 

<!DOCTYPE html>
<html>
   <head>
      <title>BabelJs Testing</title>
   </head>
   <body>
      <script type="text/javascript" src="index_new.js"></script>
   </body>
</html>

index_new.js

"use strict";

var _foo = function _foo() {
   return "Hello World";
};

alert(_foo());

クロム出力

Chrome出力

Firefoxブラウザー出力

Firefoxブラウザー出力

IEブラウザ出力

IEブラウザ出力

BabelJS-Babel 6を使用したプロジェクトのセットアップ

この章では、プロジェクト内でbabeljsを使用する方法について説明します。 nodejsを使用してプロジェクトを作成し、httpローカルサーバーを使用してプロジェクトをテストします。

プロジェクト設定の作成

このセクションでは、プロジェクトのセットアップを作成する方法を学びます。

新しいディレクトリを作成し、次のコマンドを実行してプロジェクトを作成します- 

npm init

出力

実行すると、上記のコマンドは次の出力を生成します-

Npm Init Output

作成されるpackage.jsonは次のとおりです-

Package Json Create

babeljsの使用を開始するために必要なパッケージをインストールします。 次のコマンドを実行して、_babel-cli、babel-core、babel-preset-es2015_をインストールします。 

npm install babel-cli babel-core babel-preset-es2015 --save-dev

出力

実行すると、上記のコマンドは次の出力を生成します-

Npm Install Output

Package.jsonは次のように更新されます-

Package Json Update

jsファイルをテストするには、httpサーバーが必要です。 次のコマンドを実行して、httpサーバーをインストールします- 

npm install lite-server --save-dev

package.jsonに次の詳細を追加しました-

httpサーバーのインストール

スクリプトでは、Babelは_src_フォルダーからscripts.jsをトランスコンパイルし、_scripts.bundle.js_という名前で_dev_フォルダーに保存します。 package.jsonに必要なコードをコンパイルするための完全なコマンドを追加しました。 さらに、_lite_server_を起動して変更をテストする_build_が追加されます。

src/scripts.jsには次のようなJavaScriptがあります- 

class Student {
   constructor(fname, lname, age, address) {
      this.fname = fname;
      this.lname = lname;
      this.age = age;
      this.address = address;
   }

   get fullname() {
      return this.fname +"-"+this.lname;
   }
}

次のように、indexlで変換されたスクリプトを呼び出しました- 

<html>
   lt;head></head>
   <body>
      <script type="text/javascript" src="dev/scripts.bundle.js?a=11"></script>
      <h1 id="displayname"></h1>
      <script type="text/javascript">
         var a = new Student("Siya", "Kapoor", "15", "Mumbai");
         var studentdet = a.fullname;
         document.getElementById("displayname").innerHTML = studentdet;
      </script>
   </body>
</html>

babelを呼び出してコードをコンパイルする次のコマンドを実行する必要があります。 コマンドはpackage.jsonからBabelを呼び出します- 

npm run babel

Call Babel

scripts.bundle.jsは、devフォルダに作成された新しいjsファイルです-

新しいjsファイル 

*dev/scripts.bundle.js* の出力は次のとおりです-
"use strict";

var _createClass = function () {
   function defineProperties(target, props) {
      for (var i = 0; i < props.length; i++) {
         var descriptor = props[i];
         descriptor.enumerable = descriptor.enumerable || false;
         descriptor.configurable = true;
         if ("value" in descriptor) descriptor.writable = true;
         Object.defineProperty(target, descriptor.key, descriptor);
      }
   }
   return function (Constructor, protoProps, staticProps) {
      if (protoProps) defineProperties(Constructor.prototype, protoProps);
      if (staticProps) defineProperties(Constructor, staticProps);
      return Constructor;
   };
}();

function _classCallCheck(instance, Constructor) {
   if (!(instance instanceof Constructor)) {
      throw new TypeError("Cannot call a class as a function");
   }
}

var Student = function () {
   function Student(fname, lname, age, address) {
      _classCallCheck(this, Student);

      this.fname = fname;
      this.lname = lname;
      this.age = age;
      this.address = address;
   }

   _createClass(Student, [{
      key: "fullname",
      get: function get() {
         return this.fname + "-" + this.lname;
      }
   }]);

   return Student;
}();

今、私たちは次のコマンドを実行してサーバーを起動しましょう- 

npm run build

コマンドを実行すると、ブラウザでURLが開きます-

Npm Commond Run

出力

上記のコマンドは、次の出力を生成します-

Npm Commond Run Output

BabelJS-Babel 7を使用したプロジェクトのセットアップ

Babel 7の最新バージョンは、既存のパッケージに変更を加えてリリースされました。 インストール部分は、Babel 6の場合と同じままです。 Babel 7の唯一の違いは、すべてのパッケージを @ babel/ でインストールする必要があることです。たとえば、@ babel/core、@ babel/preset-env、@ babel/cli、@ babel/polyfillなどです。

以下は、babel 7を使用して作成されたプロジェクトのセットアップです。

コマンド

プロジェクトのセットアップを開始するには、次のコマンドを実行します- 

npm init

以下のパッケージをインストールします

npm install --save-dev @babel/core
npm install --save-dev @babel/cli
npm install --save-dev @babel/preset-env

ここに作成されたpackage.jsonがあります-

パッケージのインストール

ルートフォルダに .babelrc ファイルを作成します-

Babelrcの作成 

*src/* フォルダーを作成し、それに *main.js* ファイルを追加し、es5にトランスパイルするコードを記述します。

src/main.js

let add = (a,b) => {
   return a+b;
}

トランスパイルするコマンド

npx babel src/main.js --out-file main_es5.js

main_es5.js

"use strict";

var add = function add(a, b) {
   return a + b;
};

Babel 7の動作は、Babel 6と同じままです。 唯一の違いは、@ babelを使用したpacakgeインストールです。

babel 7には非推奨のプリセットがいくつかあります。 リストは次のとおりです-

  • ES20xxプリセット
  • babel-preset-env
  • babel-preset-latest
  • Babelのステージプリセット

また、パッケージから年が削除されました- @ babel/plugin-transform-es2015-classes は @ babel/plugin-transform-classes になりました

typescriptを使用して、typescriptプリセットとbabel 7を使用してEs2015 JavaScriptに変換するもう1つの例を見ることができます。

typescriptを使用するには、typescriptパッケージを次のようにインストールする必要があります- 

npm install --save-dev @babel/preset-typescript
*src/* フォルダーに *test.ts* ファイルを作成し、typescript形式でコードを記述します-

test.ts

let getName = (person: string) => {
   return "Hello, " + person;
}

getName("Siya");

.babelrc

Babelrc Typescript

コマンド

npx babel src/test.ts --out-file test.js

test.js

"use strict";

var getName = function getName(person) {
   return "Hello, " + person;
};

getName("Siya");

BabelJS-ES6の機能をES5にトランスパイル

この章では、ES6に追加された機能について説明します。 BabelJSを使用して機能をES5にコンパイルする方法も学習します。

以下は、この章で説明するさまざまなES6機能です-

  • Let + Const
  • 矢印関数
  • クラス
  • 約束
  • ジェネレータ
  • 破壊
  • イテレータ
  • テンプレートリテラル
  • 拡張オブジェクト
  • デフォルト、レスト、スプレッドのプロパティ

Let + Const

JavaScriptでブロックスコープのローカル変数を宣言しましょう。 letの使用方法を理解するには、次の例を検討してください。

例

let a = 1;
if (a == 1) {
   let a = 2;
   console.log(a);
}
console.log(a);

出力

2
1

最初のコンソールが2を出力するのは、 a が let を使用して再度宣言され、 if ブロックでのみ使用可能になるためです。 letを使用して宣言された変数は、宣言されたブロック内でのみ使用できます。 letを使用して変数aを2回宣言しましたが、aの値は上書きされません。

これは、varキーワードとletキーワードの違いです。 varを使用して変数を宣言すると、変数は関数のスコープ内で使用可能になります。宣言された場合、グローバル変数のように機能します。

letで変数が宣言されている場合、変数はブロックスコープ内で使用できます。 ifステートメント内で宣言された場合、ifブロック内でのみ使用可能になります。 スイッチ、forループなどにも同じことが当てはまります。

ES5でbabeljsを使用したコード変換を確認します。

次のコマンドを実行してコードを変換しましょう- 

npx babel let.js --out-file let_es5.js

letキーワードのes6からes5への出力は次のとおりです-

ES6を使用してみましょう

let a = 1;
if (a == 1) {
   let a = 2;
   console.log(a);
}
console.log(a);

babelを使用してES5に転送

"use strict";

var a = 1;
if (a == 1) {
   var _a = 2;
   console.log(_a);
}
console.log(a);

ES5コードが表示されている場合、letキーワードは var キーワードに置き換えられています。 また、ifブロック内の変数の名前は _a に変更され、 let キーワードで宣言されたときと同じ効果が得られます。

Const

このセクションでは、ES6およびES5でのconstキーワードの機能について学習します。 Constキーワードもスコープ内で使用できます。外の場合はエラーがスローされます。 const宣言された変数の値は、一度割り当てられると変更できません。 constキーワードの使用方法を理解するために、次の例を考えてみましょう。

例

let a =1;
if (a == 1) {
   const age = 10;
}
console.log(age);

出力

Uncaught ReferenceError: age is not defined at :5:13

上記の出力は、ifブロック内で定数が定義され、ifブロック内で使用できるため、エラーをスローします。

BabelJSを使用したES5への変換について理解します。

ES6

let a =1;
if (a == 1) {
   const age = 10;
}
console.log(age);

コマンド

npx babel const.js --out-file const_es5.js

BabelJSを使用してES6にトランスパイリング

"use strict";

var a = 1;
if (a == 1) {
   var _age = 10;
}
console.log(age);

ES5の場合、constキーワードは上記のようにvarキーワードに置き換えられます。

矢印関数

矢印関数は、変数式と比較して構文が短くなっています。 また、ファットアロー関数またはラムダ関数とも呼ばれます。 関数には独自のthisプロパティはありません。 この関数では、キーワード関数は省略されています。

例

var add = (x,y) => {
   return x+y;
}

var k = add(3,6);
console.log(k);

出力

9

BabelJSを使用して、上記のコードをES5に変換します。

ES6-矢印機能

var add = (x,y) => {
   return x+y;
}

var k = add(3,6);
console.log(k);

コマンド

npx babel arrowfunction.js --out-file arrowfunction_es5.js

BabelJS-ES5

Babelを使用すると、矢印関数は以下に示すように変数式関数に変換されます。 

"use strict";

var add = function add(x, y) {
   return x + y;
};

var k = add(3, 6);
console.log(k);

クラス

ES6には新しいクラス機能が付属しています。 クラスは、ES5で利用可能なプロトタイプベースの継承に似ています。classキーワードは、クラスを定義するために使用されます。 クラスは特別な関数に似ており、関数式のような類似点があります。 クラス内で呼び出されるコンストラクターがあります。

例

class Person {
   constructor(fname, lname, age, address) {
      this.fname = fname;
      this.lname = lname;
      this.age = age;
      this.address = address;
   }

   get fullname() {
      return this.fname +"-"+this.lname;
   }
}
var a = new Person("Siya", "Kapoor", "15", "Mumbai");
var persondet = a.fullname;

出力

Siya-Kapoor

ES6-クラス

class Person {
   constructor(fname, lname, age, address) {
      this.fname = fname;
      this.lname = lname;
      this.age = age;
      this.address = address;
   }

   get fullname() {
      return this.fname +"-"+this.lname;
   }
}
var a = new Person("Siya", "Kapoor", "15", "Mumbai");
var persondet = a.fullname;

コマンド

npx babel class.js --out-file class_es5.js

BabelJS-ES5

ES5と同じクラスの機能を動作させるためにbabeljsを使用して追加のコードが追加されています。BabelJsは、ES6での機能と同じように機能するようにします。 

"use strict";

var _createClass = function () {
   function defineProperties(target, props) {
      for (var i = 0; i < props.length; i++) {
         var descriptor = props[i];
         descriptor.enumerable = descriptor.enumerable || false;
         descriptor.configurable = true;
         if ("value" in descriptor) descriptor.writable = true;
         Object.defineProperty(target, descriptor.key, descriptor);
      }
   }
   return function (Constructor, protoProps, staticProps) {
      if (protoProps) defineProperties(Constructor.prototype, protoProps);
      if (staticProps) defineProperties(Constructor, staticProps);
      return Constructor;
   };
}();

function _classCallCheck(instance, Constructor) {
   if (!(instance instanceof Constructor)) {
      throw new TypeError("Cannot call a class as a function");
   }
}

var Person = function () {
   function Person(fname, lname, age, address) {
      _classCallCheck(this, Person);

      this.fname = fname;
      this.lname = lname;
      this.age = age;
      this.address = address;
   }

   _createClass(Person, [{
      key: "fullname",
      get: function get() {
         return this.fname + "-" + this.lname;
      }
   }]);

   return Person;
}();

var a = new Person("Siya", "Kapoor", "15", "Mumbai");
var persondet = a.fullname;

約束

JavaScript Promiseは、コード内の非同期リクエストを管理するために使用されます。

依存関係のある非同期リクエストから複数のコールバックを管理するため、作業が楽になり、コードがきれいに保たれます。 Promiseは、コールバック関数を使用するより良い方法を提供します。 約束はES6の一部です。 デフォルトでは、プロミスを作成するとき、プロミスの状態は保留中です。

約束には3つの状態があります-

  • 保留中（初期状態）
  • 解決済み（正常に完了）
  • 拒否（失敗）
  • new Promise（）*は、promiseの構築に使用されます。 Promiseコンストラクターには、コールバック関数である引数が1つあります。 コールバック関数には、解決と拒否の2つの引数があります。

どちらも内部関数です。 記述する非同期コード、つまりAjax呼び出し、画像の読み込み、タイミング関数は、コールバック関数に入ります。

コールバック関数で実行されたタスクが成功した場合、解決関数が呼び出されます。それ以外の場合、エラーの詳細とともに拒否関数が呼び出されます。

次のコード行は、promise構造体の呼び出しを示しています- 

var _promise = new Promise (function(resolve, reject) {
   var success = true;
   if (success) {
      resolve("success");
   } else {
      reject("failure");
   }
});
_promise.then(function(value) {
  //once function resolve gets called it comes over here with the value passed in resolve
   console.log(value);//success
}).catch(function(value) {
  //once function reject gets called it comes over here with the value passed in reject
   console.log(value);//failure.
});

ES6 Promiseの例

let timingpromise = new Promise((resolve, reject) => {
   setTimeout(function() {
      resolve("Promise is resolved!");
   }, 1000);
});

timingpromise.then((msg) => {
   console.log(msg);
});

出力

Promise is resolved!

ES6-約束

let timingpromise = new Promise((resolve, reject) => {
   setTimeout(function() {
      resolve("Promise is resolved!");
   }, 1000);
});

timingpromise.then((msg) => {
   console.log(msg);
});

コマンド

npx babel promise.js --out-file promise_es5.js

BabelJS-ES5

"use strict";

var timingpromise = new Promise(function (resolve, reject) {
   setTimeout(function () {
      resolve("Promise is resolved!");
   }, 1000);
});

timingpromise.then(function (msg) {
   console.log(msg);
});

約束の場合、コードをトランスパイルしても変更されません。 古いブラウザで動作するためにはbabel-polyfillを使用する必要があります。babel-polyfillの詳細はbabel-poyfillの章で説明されています。

ジェネレータ

ジェネレーター関数は、通常の*関数*と同じです。 関数には、関数への*と関数内で使用される_yield_キーワードを含む特別な構文function *があります。 これは、必要に応じて機能を一時停止または開始するためのものです。 実行が開始されると、その間に通常の機能を停止することはできません。 returnステートメントに遭遇すると、全機能を実行するか停止します。 ここではジェネレータの実行方法が異なります。yieldキーワードを使用して関数を停止し、必要なときにジェネレータを再度呼び出すことで関数を開始できます。

例

function* generatorfunction(a) {
   yield a;
   yield a +1 ;
}

let g = generatorfunction(8);
console.log(g.next());
console.log(g.next());

出力

{value: 8, done: false}
{value: 9, done: false}

ES6-ジェネレーター

function* generatorfunction(a) {
   yield a;
   yield a +1 ;
}

let g = generatorfunction(8);
console.log(g.next());
console.log(g.next());

コマンド

npx babel generator.js --out-file generator_es5.js

BabelJS-ES5

"use strict";

var _marked =/*#__PURE__*/regeneratorRuntime.mark(generatorfunction);

function generatorfunction(a) {
   return regeneratorRuntime.wrap(function generatorfunction$(_context) {
      while (1) {
         switch (_context.prev = _context.next) {
            case 0:
               _context.next = 2;
               return a;

            case 2:
               _context.next = 4;
               return a + 1;

            case 4:
            case "end":
               return _context.stop();
         }
      }
   }, _marked, this);
}

var g = generatorfunction(8);
console.log(g.next());
console.log(g.next());

イテレータ

JavaScriptのイテレーターは、値を持つJavaScriptオブジェクトを返します。 オブジェクトには、doneというフラグがあり、true/false値を持っています。 反復子の最後でない場合はfalseを返します。 例を考えて、配列でのイテレータの動作を見てみましょう。

例

let numbers = [4, 7, 3, 10];
let a = numbers[Symbol.iterator]();
console.log(a.next());
console.log(a.next());
console.log(a.next());
console.log(a.next());
console.log(a.next());

上記の例では、数値の配列を使用し、 Symbol.iterator をインデックスとして使用して配列の関数を呼び出しました。

配列でnext（）を使用して取得する出力は次のとおりです- 

{value: 4, done: false}
{value: 7, done: false}
{value: 3, done: false}
{value: 10, done: false}
{value: undefined, done: true}

出力は値を持つオブジェクトを提供し、プロパティとして行われます。 すべての* next（）メソッド呼び出しは、配列から次の値を提供し、falseとして実行されます。 doneの値は、配列の要素が完了したときにのみ真になります。 これを配列の反復処理に使用できます。 次のように使用されている *for-of ループのような利用可能なオプションがあります-

例

let numbers = [4, 7, 3, 10];
for (let n of numbers) {
   console.log(n);
}

出力

4
7
3
10
  • for-ofループ*がキーを使用する場合、上記のように配列値の詳細を提供します。 両方の組み合わせを確認し、babeljsがそれらをes5にトランスコンパイルする方法を確認します。

例

let numbers = [4, 7, 3, 10];
let a = numbers[Symbol.iterator]();
console.log(a.next());
console.log(a.next());
console.log(a.next());
console.log(a.next());
console.log(a.next());

let _array = [4, 7, 3, 10];
for (let n of _array) {
   console.log(n);
}

コマンド

npx babel iterator.js --out-file iterator_es5.js

出力

"use strict";

var numbers = [4, 7, 3, 10];
var a = numbers[Symbol.iterator]();
console.log(a.next());
console.log(a.next());
console.log(a.next());
console.log(a.next());
console.log(a.next());

var _array = [4, 7, 3, 10];
var _iteratorNormalCompletion = true;
var _didIteratorError = false;
var _iteratorError = undefined;

try {
   for (var _iterator = _array[Symbol.iterator](),
      _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done);
      _iteratorNormalCompletion = true) {
      var n = _step.value;

      console.log(n);
   }
} catch (err) {
   _didIteratorError = true;
   _iteratorError = err;
} finally {
   try {
      if (!_iteratorNormalCompletion && _iterator.return) {
         _iterator.return();
      }
   } finally {
      if (_didIteratorError) {
         throw _iteratorError;
      }
   }
}

es5に for-of ループが追加されました。 ただし、iterator.nextはそのまま残されます。 古いブラウザで動作させるには、 babel-polyfill を使用する必要があります。 Babel-polyfillはbabelとともにインストールされ、以下に示すようにnode_modulesから同じものを使用できます-

例

<html>
   <head>
      <script type="text/javascript" src="node_modules/babel-polyfill/dist/polyfill.min.js"></script>
      <script type="text/javascript" src="iterator_es5.js"></script>
   </head>
   <body>
      <h1>Iterators</h1>
   </body>
</html>

出力

Babel polyfill

破壊

分解プロパティは、配列、オブジェクトから値を展開するJavaScript式のように動作します。

次の例では、構文を分解する仕組みを説明します。

例

let x, y, rem;
[x, y] = [10, 20];

console.log(x);
console.log(y);
[x, y, ...rem] = [10, 20, 30, 40, 50];
console.log(rem);

let z = 0;
({ x, y } = (z) ? { x: 10, y: 20 } : { x: 1, y: 2 });
console.log(x);
console.log(y);

出力

10
20
[30, 40, 50]
1
2

上記のコード行は、配列の右側から左側の変数に値がどのように割り当てられるかを示しています。 …​ rem を含む変数は、配列から残りのすべての値を取得します。

また、以下に示すように、条件演算子を使用して左側のオブジェクトから値を割り当てることができます- 

({ x, y } = (z) ? { x: 10, y: 20 } : { x: 1, y: 2 });
console.log(x);//1
console.log(y);//2

babeljsを使用して同じものをES5に変換しましょう-

コマンド

npx babel destructm.js --out-file destruct_es5.js

destruct_es5.js

"use strict";

var x = void 0,
   y = void 0,
   rem = void 0;
x = 10;
y = 20;

console.log(x);
console.log(y);
x = 10;
y = 20;
rem = [30, 40, 50];

console.log(rem);

var z = 0;

var _ref = z ? { x: 10, y: 20 } : { x: 1, y: 2 };

x = _ref.x;
y = _ref.y;

console.log(x);
console.log(y);

テンプレートリテラル

テンプレートリテラルは、その中の式を許可する文字列リテラルです。 一重引用符または二重引用符の代わりにbacktick（ ``）を使用します。 文字列内で式を言うとき、変数を使用したり、関数を呼び出したりできることを意味します。 文字列の中。

例

let a = 5;
let b = 10;
console.log(`Using Template literal : Value is ${a + b}.`);
console.log("Using normal way : Value is " + (a + b));

出力

Using Template literal : Value is 15.
Using normal way : Value is 15

ES6-テンプレートリテラル

let a = 5;
let b = 10;
console.log(`Using Template literal : Value is ${a + b}.`);
console.log("Using normal way : Value is " + (a + b));

コマンド

npx babel templateliteral.js --out-file templateliteral_es5.js

BabelJS-ES5

"use strict";

var a = 5;
var b = 10;
console.log("Using Template literal : Value is " + (a + b) + ".");

console.log("Using normal way : Value is " + (a + b));

拡張されたオブジェクトリテラル

es6では、オブジェクトリテラルに追加された新しい機能は非常に便利で便利です。 ES5およびES6のオブジェクトリテラルのいくつかの例を見ていきます-

例

ES5
var red = 1, green = 2, blue = 3;
var rgbes5 = {
   red: red,
   green: green,
   blue: blue
};
console.log(rgbes5);//{red: 1, green: 2, blue: 3}

ES6
let rgbes6 = {
   red,
   green,
   blue
};
console.log(rgbes6);//{red: 1, green: 2, blue: 3}

上記のコードが表示される場合、ES5とES6のオブジェクトは異なります。 ES6では、変数名がキーと同じ場合、キー値を指定する必要はありません。

babelを使用したES5へのコンパイルを見てみましょう。

ES6拡張オブジェクトリテラル

const red = 1, green = 2, blue = 3;
let rgbes5 = {
   red: red,
   green: green,
   blue: blue
};
console.log(rgbes5);

let rgbes6 = {
   red,
   green,
   blue
};
console.log(rgbes6);

let brand = "carbrand";
const cars = {
   [brand]: "BMW"
}
console.log(cars.carbrand); //"BMW"

コマンド

npx babel enhancedobjliteral.js --out-file enhancedobjliteral_es5.js

BabelJS-ES5

"use strict";

function _defineProperty(obj, key, value) {
   if (key in obj) {
      Object.defineProperty(obj, key, {
         value: value, enumerable: true, configurable: true, writable: true
      });
   } else { obj[key] = value; } return obj;
}

var red = 1,
   green = 2,
   blue = 3;
var rgbes5 = {
   red: red,
   green: green,
   blue: blue
};
console.log(rgbes5);

var rgbes6 = {
   red: red,
   green: green,
   blue: blue
};
console.log(rgbes6);

var brand = "carbrand";
var cars = _defineProperty({}, brand, "BMW");

console.log(cars.carbrand);//"BMW"

デフォルト、レスト、スプレッドのプロパティ

このセクションでは、デフォルト、レスト、スプレッドのプロパティについて説明します。

デフォルト

ES6では、次のように関数paramsにデフォルトのパラメータを使用できます-

例

let add = (a, b = 3) => {
   return a + b;
}

console.log(add(10, 20)); //30
console.log(add(10));     //13

babelを使用して上記のコードをES5に変換します。

コマンド

npx babel default.js --out-file default_es5.js

BabelJS-ES5

"use strict";

var add = function add(a) {
   var b = arguments.length > 1 >> arguments[1] !== undefined ? arguments[1] : 3;
   return a + b;
};

console.log(add(10, 20));
console.log(add(10));

Rest

残りのパラメータは、次の例に示すように3つのドット（…​）で始まります-

例

let add = (...args) => {
   let sum = 0;
   args.forEach(function (n) {
      sum += n;
   });
   return sum;
};

console.log(add(1, 2));   //3
console.log(add(1, 2, 5, 6, 6, 7));  //27

上記の関数では、n個のパラメーターを関数addに渡します。 ES5にあった場合にこれらすべてのパラメーターを追加するには、引数オブジェクトに依存して引数の詳細を取得する必要があります。 ES6では、 rest it は、上記のように3つのドットで引数を定義するのに役立ち、ループを介して数値の合計を取得できます。

注意-3つのドット、つまり休符を使用する場合、追加の引数は使用できません。

例

let add = (...args, value) => {   //syntax error
   let sum = 0;
   args.forEach(function (n) {
      sum += n;
   });
   return sum;
};

上記のコードは構文エラーになります。

es5へのコンパイルは次のようになります-

コマンド

npx babel rest.js --out-file rest_es5.js

バベル-ES5

"use strict";

var add = function add() {
   for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
   }

   var sum = 0;
   args.forEach(function (n) {
      sum += n;
   });
   return sum;
};

console.log(add(1, 2));
console.log(add(1, 2, 5, 6, 6, 7));

スプレッド

Spreadプロパティには、残りのような3つのドットもあります。 以下は、spreadプロパティの使用方法を示す実例です。

例

let add = (a, b, c) => {
   return a + b + c;
}
let arr = [11, 23, 3];
console.log(add(...arr));  //37

上記のコードがbabelを使用してどのように変換されるかを見てみましょう-

コマンド

npx babel spread.js --out-file spread_es5.js

バベル-ES5

"use strict";

var add = function add(a, b, c) {
   return a + b + c;
};
var arr = [11, 23, 3];
console.log(add.apply(undefined, arr));

プロキシ

プロキシは、プロパティルックアップ、割り当て、列挙、関数、呼び出しなどの操作のカスタム動作を定義できるオブジェクトです。

構文

var a = new Proxy(target, handler);

_target_と_handler_は両方ともオブジェクトです。

  • _target_はオブジェクトであるか、別のプロキシ要素にすることができます。
  • _handler_は、呼び出されたときに動作を与える関数としてのプロパティを持つオブジェクトになります。

例の助けを借りてこれらの機能を理解しようとしましょう-

例

let handler = {
   get: function (target, name) {
      return name in target ? target[name] : "invalid key";
   }
};

let o = {
   name: 'Siya Kapoor',
   addr: 'Mumbai'
}

let a = new Proxy(o, handler);
console.log(a.name);
console.log(a.addr);
console.log(a.age);

上記の例でターゲットとハンドラを定義し、プロキシで使用しました。 プロキシは、キーと値を含むオブジェクトを返します。

出力

Siya Kapoor
Mumbai
invalid key

ここで、上記のコードをbabelを使用してES5にトランスパイルする方法を見てみましょう-

コマンド

npx babel proxy.js --out-file proxy_es5.js

バベル-ES5

'use strict';

var handler = {
   get: function get(target, name) {
      return name in target ? target[name] : "invalid key";
   }
};

var o = {
   name: 'Siya Kapoor',
   addr: 'Mumbai'
};

var a = new Proxy(o, handler);
console.log(a.name);
console.log(a.addr);
console.log(a.age);

BabelJS-ES5へのES6モジュールのトランスパイル

この章では、Babelを使用してES6モジュールをES5にトランスパイルする方法について説明します。

モジュール

JavaScriptコードの一部を再利用する必要があるシナリオを考えます。 ES6は、モジュールの概念であなたを助けます。

  • モジュール*は、ファイルに記述されたJavaScriptコードの塊にすぎません。 モジュール内の関数または変数は、モジュールファイルでエクスポートしない限り使用できません。

簡単に言えば、モジュールは、モジュールにコードを記述し、コードの他の部分がアクセスする必要があるコードの部分のみを公開するのに役立ちます。

モジュールの使用方法と、モジュールをエクスポートしてコードで使用する方法を理解するための例を考えてみましょう。

例

*add.js*
var add = (x,y) => {
   return x+y;
}

module.exports=add;
*multiply.js*
var multiply = (x,y) => {
   return x*y;
};

module.exports = multiply;
*main.js*
import add from './add';
import multiply from './multiply'

let a = add(10,20);
let b = multiply(40,10);

console.log("%c"+a,"font-size:30px;color:green;");
console.log("%c"+b,"font-size:30px;color:green;");

2つの指定された数値を追加する3つのファイルadd.js、2つの指定された数値を乗算するmultiply.js、およびaddとmultiplyを呼び出して出力をコンソールするmain.jsがあります。 

*main.js* で *add.js* および *multiply.js* を指定するには、以下に示すようにまずエクスポートする必要があります-
module.exports = add;
module.exports = multiply;

それらを main.js で使用するには、以下に示すようにインポートする必要があります 

import add from './add';
import multiply from './multiply'

ブラウザで実行できるように、ファイルをビルドするにはモジュールバンドラーが必要です。

私たちはそれを行うことができます-

  • Webpackを使用する
  • Gulpの使用

ES6モジュールとWebpack

このセクションでは、ES6モジュールについて説明します。 また、webpackの使用方法も学びます。

始める前に、次のパッケージをインストールする必要があります- 

npm install --save-dev webpack
npm install --save-dev webpack-dev-server
npm install --save-dev babel-core
npm install --save-dev babel-loader
npm install --save-dev babel-preset-env

Package.json

ES6モジュールWebpack

npmを使用して実行するスクリプトにパックおよび公開タスクを追加しました。 これが、最終ファイルを作成するwebpack.config.jsファイルです。

webpack.config.js

var path = require('path');

module.exports = {
   entry: {
      app: './src/main.js'
   },
   output: {
      path: path.resolve(__dirname, 'dev'),
      filename: 'main_bundle.js'
   },
   mode:'development',
   module: {
      rules: [
         {
            test:/\.js$/,
            include: path.resolve(__dirname, 'src'),
            loader: 'babel-loader',
            query: {
               presets: ['env']
            }
         }
      ]
   }
};

コマンドnpm run packを実行して、ファイルをビルドします。 最終的なファイルはdev/フォルダーに保存されます。

コマンド

npm run pack

Npm Run Pack 

*dev/main_bundle.js* 共通ファイルが作成されます。 このファイルは、add.js、multiply.js、main.jsを組み合わせて、 *dev/main_bundle.js* に保存します。
/******/(function(modules) {//webpackBootstrap
/******/  //The module cache
/******/   var installedModules = {};
/******/
/******/  //The require function
/******/   function __webpack_require__(moduleId) {
/******/
/******/     //Check if module is in cache
/******/      if(installedModules[moduleId]) {
/******/         return installedModules[moduleId].exports;
/******/      }
/******/     //Create a new module (and put it into the cache)
/******/      var module = installedModules[moduleId] = {
/******/         i: moduleId,
/******/         l: false,
/******/         exports: {}
/******/      };
/******/
/******/     //Execute the module function
/******/      modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/     //Flag the module as loaded
/******/      module.l = true;
/******/
/******/     //Return the exports of the module
/******/      return module.exports;
/******/   }
/******/
/******/
/******/  //expose the modules object (__webpack_modules__)
/******/   __webpack_require__.m = modules;
/******/
/******/  //expose the module cache
/******/   __webpack_require__.c = installedModules;
/******/
/******/  //define getter function for harmony exports
/******/   __webpack_require__.d = function(exports, name, getter) {
/******/      if(!__webpack_require__.o(exports, name)) {
/******/         Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/      }
/******/   };
/******/
/******/  //define __esModule on exports
/******/   __webpack_require__.r = function(exports) {
/******/     if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/        Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/     }
/******/     Object.defineProperty(exports, '__esModule', { value: true });
/******/   };
/******/
/******/  //create a fake namespace object
/******/  //mode & 1: value is a module id, require it
/******/  //mode & 2: merge all properties of value into the ns
/******/  //mode & 4: return value when already ns object
/******/  //mode & 8|1: behave like require
/******/   __webpack_require__.t = function(value, mode) {
/******/      if(mode & 1) value = __webpack_require__(value);
/******/      if(mode & 8) return value;
/******/      if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/      var ns = Object.create(null);
/******/      __webpack_require__.r(ns);
/******/      Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/      if(mode & 2 && typeof value != 'string')
               for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/      return ns;
/******/   };
/******/
/******/  //getDefaultExport function for compatibility with non-harmony modules
/******/   __webpack_require__.n = function(module) {
/******/      var getter = module && module.__esModule ?
/******/      function getDefault() { return module['default']; } :
/******/      function getModuleExports() { return module; };
/******/      __webpack_require__.d(getter, 'a', getter);
/******/      return getter;
/******/   };
/******/
/******/  //Object.prototype.hasOwnProperty.call
/******/    __webpack_require__.o = function(object, property) {
               return Object.prototype.hasOwnProperty.call(object, property);
            };
/******/
/******/  //__webpack_public_path__
/******/   __webpack_require__.p = "";
/******/
/******/
/******/  //Load entry module and return exports
/******/   return __webpack_require__(__webpack_require__.s = "./src/main.js");
/******/})
/************************************************************************/
/******/({
/***/      "./src/add.js":
/*!********************!*\
!** *./src/add.js* **!
\********************/
/*! no static exports found */
/***/(function(module, exports, __webpack_require__) {
   "use strict";

   eval(
      "\n\nvar add = function add(x, y) {\n return x + y;\n};
      \n\nmodule.exports = add;
      \n\n//# sourceURL = webpack:///./src/add.js?"
   );
  /***/}),
/***/"./src/main.js":
/*!*********************!*\
!** *./src/main.js* **!
\*********************/
/*! no static exports found */
/***/(function(module, exports, __webpack_require__) {

      "use strict";
      eval(
         "\n\nvar _add = __webpack_require__(/*! ./add */\"./src/add.js\");
         \n\nvar _add2 = _interopRequireDefault(_add);
         \n\nvar _multiply = __webpack_require__(/*! ./multiply */\"./src/multiply.js\");
         \n\nvar _multiply2 = _interopRequireDefault(_multiply);
         \n\nfunction _interopRequireDefault(obj) {
            return obj &gt;&gt; obj.__esModule ? obj : { default: obj };
         }
         \n\nvar a = (0, _add2.default)(10, 20);
         \nvar b = (0, _multiply2.default)(40, 10);
         \n\nconsole.log(\"%c\" + a, \"font-size:30px;color:green;\");
         \nconsole.log(\"%c\" + b, \"font-size:30px;color:green;\");
         \n\n//# sourceURL = webpack:///./src/main.js?"
      );

/***/}),

/***/"./src/multiply.js":
/*!*************************!*\
   !** *./src/multiply.js* **!
   \*************************/
/*! no static exports found */
/***/(function(module, exports, __webpack_require__) {

"use strict";
eval(
   "\n\nvar multiply = function multiply(x, y) {\n return x * y;\n};
   \n\nmodule.exports = multiply;
   \n\n//# sourceURL = webpack:///./src/multiply.js?"
);

/***/})

/******/});

コマンド

以下は、ブラウザで出力をテストするコマンドです- 

npm run publish

NPM Run Publish

プロジェクトにindexlを追加します。 これにより、dev/main_bundle.jsが呼び出されます。 

<html>
   <head></head>
   <body>
      <script type="text/javascript" src="dev/main_bundle.js"></script>
   </body>
</html>

出力

メインバンドル

ES6モジュールとGulp

Gulpを使用してモジュールを1つのファイルにバンドルするには、browserifyとbabelifyを使用します。 まず、プロジェクトのセットアップを作成し、必要なパッケージをインストールします。

コマンド

npm init

プロジェクトのセットアップを開始する前に、次のパッケージをインストールする必要があります- 

npm install --save-dev gulp
npm install --save-dev babelify
npm install --save-dev browserify
npm install --save-dev babel-preset-env
npm install --save-dev babel-core
npm install --save-dev gulp-connect
npm install --save-dev vinyl-buffer
npm install --save-dev vinyl-source-stream

インストール後のpackage.json

後

gulpfile.jsを作成します。これは、タスクを実行してモジュールをバンドルするのに役立ちます。 上記で使用したものと同じファイルをwebpackで使用します。

例

*add.js*
var add = (x,y) => {
   return x+y;
}

module.exports=add;
*multiply.js*
var multiply = (x,y) => {
   return x*y;
};

module.exports = multiply;
*main.js*
import add from './add';
import multiply from './multiply'

let a = add(10,20);
let b = multiply(40,10);

console.log("%c"+a,"font-size:30px;color:green;");
console.log("%c"+b,"font-size:30px;color:green;");

gulpfile.jsはここで作成されます。 ユーザーはブラウザを使用し、トランスフォームを使用してバベル化します。 babel-preset-envは、コードをes5に変換するために使用されます。 

*Gulpfile.js*
const gulp = require('gulp');
const babelify = require('babelify');
const browserify = require('browserify');
const connect = require("gulp-connect");
const source = require('vinyl-source-stream');
const buffer = require('vinyl-buffer');

gulp.task('build', () => {
   browserify('src/main.js')
   .transform('babelify', {
      presets: ['env']
   })
   .bundle()
   .pipe(source('main.js'))
   .pipe(buffer())
   .pipe(gulp.dest('dev/'));
});
gulp.task('default', ['es6'],() => {
   gulp.watch('src/app.js',['es6'])
});

gulp.task('watch', () => {
   gulp.watch('./*.js', ['build']);
});

gulp.task("connect", function () {
   connect.server({
      root: ".",
      livereload: true
   });
});

gulp.task('start', ['build', 'watch', 'connect']);

私たちはbrowserifyとbabelifyを使用してモジュールのエクスポートとインポートを処理し、次のように同じものを1つのファイルに結合します- 

gulp.task('build', () => {
   browserify('src/main.js')
   .transform('babelify', {
      presets: ['env']
   })
   .bundle()
   .pipe(source('main.js'))
   .pipe(buffer())
   .pipe(gulp.dest('dev/'));
});

babelifyがプリセットenvで呼び出される変換を使用しました。

main.jsを含むsrcフォルダーがbrowserifyに与えられ、devフォルダーに保存されます。

ファイルをコンパイルするには、コマンド gulp start を実行する必要があります-

コマンド

npm start

開始

これが dev/ フォルダに作成された最終ファイルです- 

(function() {
   function r(e,n,t) {
      function o(i,f) {
         if(!n[i]) {
            if(!e[i]) {
               var c = "function"==typeof require&&require;
               if(!f&&c)return c(i,!0);if(u)return u(i,!0);
               var a = new Error("Cannot find module '"+i+"'");
               throw a.code = "MODULE_NOT_FOUND",a
            }
            var p = n[i] = {exports:{}};
            e[i][0].call(
               p.exports,function(r) {
                  var n = e[i][1][r];
                  return o(n||r)
               }
            ,p,p.exports,r,e,n,t)
         }
         return n[i].exports
      }
      for(var u="function"==typeof require>>require,i = 0;i<t.length;i++)o(t[i]);return o
   }
   return r
})()
({1:[function(require,module,exports) {
   "use strict";

   var add = function add(x, y) {
      return x + y;
   };

   module.exports = add;
},{}],2:[function(require,module,exports) {
   'use strict';

   var _add = require('./add');
   var _add2 = _interopRequireDefault(_add);
   var _multiply = require('./multiply');
   var _multiply2 = _interopRequireDefault(_multiply);
   function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
   var a = (0, _add2.default)(10, 20);
   var b = (0, _multiply2.default)(40, 10);

   console.log("%c" + a, "font-size:30px;color:green;");
   console.log("%c" + b, "font-size:30px;color:green;");
},
{"./add":1,"./multiply":3}],3:[function(require,module,exports) {
   "use strict";

   var multiply = function multiply(x, y) {
      return x * y;
   };

   module.exports = multiply;

},{}]},{},[2]);

indexlで同じを使用し、ブラウザで同じを実行して出力を取得します- 

<html>
   <head></head>
   <body>
      <h1>Modules using Gulp</h1>
      <script type="text/javascript" src="dev/main.js"></script>
   </body>
</html>

出力

Gulpを使用するモジュール

BabelJS-ES7へのTranspile ES7機能

この章では、ES7の機能をES5に変換する方法を学びます。

ECMA Script 7には、次の新機能が追加されています-

  • 非同期待ち
  • べき乗演算子
  • Array.prototype.includes（）

babeljsを使用してES5にコンパイルします。 プロジェクトの要件に応じて、ecmaバージョン（ES7からES6またはES7からES5）でコードをコンパイルすることもできます。 ES5バージョンは最も安定しており、すべての最新および古いブラウザーで正常に動作するため、コードをES5にコンパイルします。

非同期待ち

非同期は、暗黙のプロミスを返す非同期関数です。 約束は解決されるか拒否されます。 非同期機能は、通常の標準機能と同じです。 この関数には、promiseを返すまで実行を一時停止するawait式を含めることができ、一度取得すると、実行が続行されます。 Awaitは、関数が非同期の場合にのみ機能します。

asyncとawaitの動作例を次に示します。

例

let timer = () => {
   return new Promise(resolve => {
      setTimeout(() => {
         resolve("Promise resolved after 5 seconds");
      }, 5000);
   });
};
let out = async () => {
   let msg = await timer();
   console.log(msg);
   console.log("hello after await");
};
out();

出力

Promise resolved after 5 seconds
hello after await

await式は、タイマー関数が呼び出される前に追加されます。 タイマー関数は、5秒後にプロミスを返します。 awaitは、タイマー機能の約束が解決または拒否されるまで実行を停止し、後で続行します。

babelを使用して上記のコードをES5に変換します。

ES7-非同期待ち

let timer = () => {
   return new Promise(resolve => {
      setTimeout(() => {
         resolve("Promise resolved after 5 seconds");
      }, 5000);
   });
};
let out = async () => {
   let msg = await timer();
   console.log(msg);
   console.log("hello after await");
};
out();

コマンド

npx babel asyncawait.js --out-file asyncawait_es5.js

BabelJS-ES5

"use strict";

var timer = function timer() {
   return new Promise(function (resolve) {
      setTimeout(function () {
         resolve("Promise resolved after 5 seconds");
      }, 5000);
   });
};
var out = async function out() {
   var msg = await timer();
   console.log(msg);
   console.log("hello after await");
};

out();

Babeljsはオブジェクトまたはメソッドをコンパイルしません。そのため、ここで使用されるプロミスは変換されず、そのまま表示されます。 古いブラウザでpromiseをサポートするには、promiseをサポートするコードを追加する必要があります。 今のところ、次のようにbabel-polyfillをインストールしましょう- 

npm install --save babel-polyfill

dev-dependencyではなく、依存関係として保存する必要があります。

ブラウザでコードを実行するには、node_modules \ babel-polyfill \ dist \ polyfill.min.jsのポリフィルファイルを使用し、以下に示すようにスクリプトタグを使用して呼び出します- 

<!DOCTYPE html>
<html>
   <head>
      <title>BabelJs Testing</title>
   </head>
   <body>
      <script src="node_modules\babel-polyfill\dist\polyfill.min.js" type="text/javascript"></script>
      <script type="text/javascript" src="aynscawait_es5.js"></script>
   </body>
</html>

上記のテストページを実行すると、コンソールに次のような出力が表示されます。

ポリフィルファイル

べき乗演算子

*ES7でべき乗に使用される演算子です。 次の例は、ES7での同じ動作を示しており、コードはbabeljsを使用してトランスコンパイルされます。

例

let sqr = 9*  *2;
console.log(sqr);

出力

81

ES6-べき乗

let sqr = 9* * 2;
console.log(sqr);

べき乗演算子を変換するには、次のようにインストールするプラグインをインストールする必要があります-

コマンド

npm install --save-dev babel-plugin-transform-exponentiation-operator

次のようにプラグインの詳細を .babelrc ファイルに追加します- 

{
   "presets":[
      "es2015"
   ],
   "plugins": ["transform-exponentiation-operator"]
}

コマンド

npx babel exponeniation.js --out-file exponeniation_es5.js

BabelJS-ES5

"use strict";

var sqr = Math.pow(9, 2);
console.log(sqr);

Array.prototype.includes（）

この機能は、渡された要素が配列に存在する場合はtrueを、存在しない場合はfalseを返します。

例

let arr1 = [10, 6, 3, 9, 17];
console.log(arr1.includes(9));
let names = ['Siya', 'Tom', 'Jerry', 'Bean', 'Ben'];
console.log(names.includes('Tom'));
console.log(names.includes('Be'));

出力

true
true
false
*includes* は配列のメソッドであり、トランスパイルされないため、ここで再びbabel-polyfillを使用する必要があります。 古いブラウザで機能させるために、ポリフィルを含める追加の手順が必要です。

ES6-array.includes

let arr1 = [10, 6, 3, 9, 17];
console.log(arr1.includes(9));
let names = ['Siya', 'Tom', 'Jerry', 'Bean', 'Ben'];
console.log(names.includes('Tom'));
console.log(names.includes('Be'));

コマンド

npx babel array_include.js --out-file array_include_es5.js

バベル-ES5

'use strict';

var arr1 = [10, 6, 3, 9, 17];
console.log(arr1.includes(9));
var names = ['Siya', 'Tom', 'Jerry', 'Bean', 'Ben'];
console.log(names.includes('Tom'));
console.log(names.includes('Be'));

古いブラウザでテストするには、以下に示すようにポリフィルを使用する必要があります- 

<!DOCTYPE html>
<html>
   <head>
      <title>BabelJs Testing</title>
   </head>
   <body>
      <script src="node_modules\babel-polyfill\dist\polyfill.min.js" type="text/javascript"></script>
      <script type="text/javascript" src="array_include_es5.js"></script>
   </body>
</html>

出力

Babel ES5

BabelJS-ES5へのES8のトランスパイル機能

文字列パディングは、javascriptに追加された新しいES8機能です。 babelを使用して文字列のパディングをES5に変換する簡単な例に取り組みます。

文字列のパディング

文字列パディングは、指定された長さに従って、左側から別の文字列を追加します。 文字列パディングの構文は次のとおりです-

構文

str.padStart(length, string);
str.padEnd(length, string);

例

const str = 'abc';

console.log(str.padStart(8, '_'));
console.log(str.padEnd(8, '_'));

出力

_____abc
abc_____

ES8-文字列パディング

const str = 'abc';

console.log(str.padStart(8, '_'));
console.log(str.padEnd(8, '_'));

コマンド

npx babel strpad.js --out-file strpad_es5.js

バベル-ES5

'use strict';

var str = 'abc';

console.log(str.padStart(8, '_'));
console.log(str.padEnd(8, '_'));

以下に示すように、jsはbabel-polyfillとともに使用する必要があります-

testl

<!DOCTYPE html>
<html>
   <head>
      <title>BabelJs Testing</title>
   </head>
   <body>
      <script src="node_modules\babel-polyfill\dist\polyfill.min.js" type="text/javascript"></script>
      <script type="text/javascript" src="strpad_es5.js"></script>
   </body>
</html>

文字列パディング

BabelJS-Babelプラグイン

BabelJSは、使用可能なプリセットとプラグインに基づいて、指定されたコードの構文を変更するjavascriptコンパイラです。 バベルのコンパイルの流れには、次の3つの部分が含まれます-

  • 解析中
  • 変身
  • 印刷

babelに与えられたコードは、構文が変更されただけで返されます。 コードをes6からes5に、またはその逆にコンパイルするために、プリセットが.babelrcファイルに追加されるのをすでに見てきました。 プリセットはプラグインのセットにすぎません。 コンパイル時にプリセットまたはプラグインの詳細が指定されていない場合、Babelは何も変更しません。

私たちは今、次のプラグインについて議論しましょう-

  • 変換クラスのプロパティ
  • 変換指数演算子
  • の
  • オブジェクトの残りと広がり
  • 非同期/待機

次に、プロジェクトのセットアップを作成し、いくつかのプラグインで作業します。これにより、Babelのプラグインの要件を明確に理解できます。

コマンド

npm init

babelに必要なパッケージをインストールする必要があります– babel cli、babel core、babel-presetなど。

babel 6のパッケージ

npm install babel-cli babel-core babel-preset-es2015 --save-dev

babel 7のパッケージ

npm install @babel/cli @babel/core @babel/preset-env --save-dev

プロジェクトでjsファイルを作成し、jsコードを記述します。

クラス-Transform-class-properties

この目的のために以下に示すコードを遵守してください-

例

*main.js*
class Person {
   constructor(fname, lname, age, address) {
      this.fname = fname;
      this.lname = lname;
      this.age = age;
      this.address = address;
   }

   get fullname() {
      return this.fname + "-" + this.lname;
   }
}
var a = new Person("Siya", "Kapoor", "15", "Mumbai");
var persondet = a.fullname;

現在、プリセットまたはプラグインの詳細をbabelに提供していません。 コマンドを使用してコードをトランスパイルする場合- 

npx babel main.js --out-file main_out.js
*main_out.js*
class Person {
   constructor(fname, lname, age, address) {
      this.fname = fname;
      this.lname = lname;
      this.age = age;
      this.address = address;
   }

   get fullname() {
      return this.fname + "-" + this.lname;
   }
}
var a = new Person("Siya", "Kapoor", "15", "Mumbai");
var persondet = a.fullname;

コードをそのまま入手します。 .babelrc ファイルにプリセットを追加しましょう。

注-プロジェクトのルートフォルダ内に .babelrc ファイルを作成します。 

*.babelrc for babel 6*

Babelrc For Babel 

*babel 7の.babelrc*
{
   "presets":["@babel/env"]
}

プリセットは既にインストールされています。今、私たちは再びコマンドを実行しましょう- 

npx babel main.js --out-file main_out.js
*main_out.js*
"use strict";

var _createClass = function () {
   function defineProperties(target, props) {
      for (var i = 0; i < props.length; i++) {
         var descriptor = props[i];
         descriptor.enumerable = descriptor.enumerable || false;
         descriptor.configurable = true;
         if ("value" in descriptor) descriptor.writable = true;
         Object.defineProperty(target, descriptor.key, descriptor);
      }
   }
   return function (Constructor, protoProps, staticProps) {
      if (protoProps) defineProperties(Constructor.prototype, protoProps);
      if (staticProps) defineProperties(Constructor, staticProps);
      return Constructor;
   };
}();

function _classCallCheck(instance, Constructor) {
   if (!(instance instanceof Constructor)) {
      throw new TypeError("Cannot call a class as a function");
   }
}

var Person = function () {
   function Person(fname, lname, age, address) {
      _classCallCheck(this, Person);

      this.fname = fname;
      this.lname = lname;
      this.age = age;
      this.address = address;
   }

   _createClass(Person, [{
      key: "fullname",
      get: function get() {
         return this.fname + "-" + this.lname;
      }
   }]);
   return Person;
}();

var a = new Person("Siya", "Kapoor", "15", "Mumbai");
var persondet = a.fullname;

ES6では、クラス構文は次のとおりです 

class Person {
   constructor(fname, lname, age, address) {
      this.fname = fname;
      this.lname = lname;
      this.age = age;
      this.address = address;
   }

   get fullname() {
      return this.fname + "-" + this.lname;
   }
}

コンストラクターがあり、クラスのすべてのプロパティはその内部で定義されます。 ケースでは、クラス外でクラスプロパティを定義する必要があります。

例

class Person {
   name = "Siya Kapoor";

   fullname = () => {
      return this.name;
   }
}
var a = new Person();
var persondet = a.fullname();
console.log("%c"+persondet, "font-size:25px;color:red;");

上記のコードをコンパイルすると、babelでエラーがスローされます。 これにより、コードがコンパイルされなくなります。

バベルのエラー

これを希望どおりに機能させるために、babel-plugin-transform-class-propertiesと呼ばれるbabelプラグインを使用できます。 それを機能させるために、次のように最初にインストールする必要があります-

babel 6のパッケージ

npm install --save-dev babel-plugin-transform-class-properties

babel 7のパッケージ

npm install --save-dev @babel/plugin-proposal-class-properties

プラグインをbabel 6の.babelrcファイルに追加します-

プラグインBabelrcの追加 

*babel 7の.babelrc*
{
   "plugins": ["@babel/plugin-proposal-class-properties"]
}

ここで、コマンドを再度実行します。

コマンド

npx babel main.js --out-file main_out.js
*main.js*
class Person {
   name = "Siya Kapoor";

   fullname = () => {
      return this.name;
   }
}
var a = new Person();
var persondet = a.fullname();
console.log("%c"+persondet, "font-size:25px;color:red;");
  • main_out.jsにコンパイル*
class Person {
   constructor() {
      this.name = "Siya Kapoor";

      this.fullname = () => {
         return this.name;
      };
   }
}
var a = new Person();
var persondet = a.fullname();
console.log("%c"+persondet, "font-size:25px;color:red;");

出力

以下は、ブラウザで使用したときに得られる出力です-

Babelrc出力

べき乗演算子-変換指数演算子

*ES7でべき乗に使用される演算子です。 次の例は、ES7での同じ動作を示しています。 また、babeljsを使用してコードをトランスパイルする方法も示します。

例

let sqr = 9* * 2;
console.log("%c"+sqr, "font-size:25px;color:red;");

べき乗演算子を変換するには、次のようにプラグインをインストールする必要があります-

バベル6のパッケージ 

npm install --save-dev babel-plugin-transform-exponentiation-operator

バベル7のパッケージ 

npm install --save-dev @babel/plugin-transform-exponentiation-operator

babel 6の場合、次のようにプラグインの詳細を .babelrc ファイルに追加します- 

{
   "plugins": ["transform-exponentiation-operator"]
}
*babel 7の.babelrc*
{
   "plugins": ["@babel/plugin-transform-exponentiation-operator"]
}

コマンド 

npx babel exponeniation.js --out-file exponeniation_out.js
*exponeniation_out.js*
let sqr = Math.pow(9, 2);
console.log("%c" + sqr, "font-size:25px;color:red;");

出力

爆発出力

の

babel6および7のプラグインに必要なパッケージは次のとおりです-

バベル6

npm install --save-dev babel-plugin-transform-es2015-for-of

バベル7

npm install --save-dev @babel/plugin-transform-for-of
*.babelrc for babel6*
{
   "plugins": ["transform-es2015-for-of"]
}
*.babelrc for babel7*
{
   "plugins": ["@babel/plugin-transform-for-of"]
}
*forof.js*
let foo = ["PHP", "C++", "Mysql", "JAVA"];
for (var i of foo) {
   console.log(i);
}

コマンド

npx babel forof.js --out-file forof_es5.js
*Forof_es5.js*
let foo = ["PHP", "C++", "Mysql", "JAVA"];
var _iteratorNormalCompletion = true;
var _didIteratorError = false;
var _iteratorError = undefined;

try {
   for (var _iterator = foo[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
      var i = _step.value;

      console.log(i);
   }
} catch (err) {
   _didIteratorError = true;
   _iteratorError = err;
} finally {
   try {
      if (!_iteratorNormalCompletion && _iterator.return) {
         _iterator.return();
      }
   } finally {
      if (_didIteratorError) {
         throw _iteratorError;
      }
   }
}

出力

Fores es5出力

オブジェクトレストスプレッド

babel6および7のプラグインに必要なパッケージは次のとおりです-

バベル6

npm install --save-dev babel-plugin-transform-object-rest-spread

バベル7

npm install --save-dev @babel/plugin-proposal-object-rest-spread
*.babelrc for babel6*
{
   "plugins": ["transform-object-rest-spread"]
}
*.babelrc for babel7*
{
   "plugins": ["@babel/plugin-proposal-object-rest-spread"]
}
*o.js*
let { x1, y1, ...z1 } = { x1: 11, y1: 12, a: 23, b: 24 };
console.log(x1);
console.log(y1);
console.log(z1);

let n = { x1, y1, ...z1};
console.log(n);

コマンド

npx babel o.js --out-file o_es5.js
*o_es5.js*
var _extends = Object.assign || function (target) {
   for (var i = 1; i < arguments.length; i++) {
      var source = arguments[i]; for (var key in source) {
         if (Object.prototype.hasOwnProperty.call(source, key)) {
            target[key] = source[key];
         }
      }
   }
   return target;
};

function _objectWithoutProperties(obj, keys) {
   var target = {};
   for (var i in obj) {
      if (keys.indexOf(i) >= 0) continue;
      if (!Object.prototype.hasOwnProperty.call(obj, i)) continue;
      target[i] = obj[i];
   }
   return target;
}

let _x1$y1$a$b = { x1: 11, y1: 12, a: 23, b: 24 },
   { x1, y1 } = _x1$y1$a$b,
   z1 = _objectWithoutProperties(_x1$y1$a$b, ["x1", "y1"]);
console.log(x1);
console.log(y1);
console.log(z1);

let n = _extends({ x1, y1 }, z1);
console.log(n);

出力

オブジェクトレストスプレッド出力

非同期/待機

babel 6には次のパッケージをインストールする必要があります- 

npm install --save-dev babel-plugin-transform-async-to-generator

babel 7のパッケージ

npm install --save-dev @babel/plugin-transform-async-to-generator
*.babelrc for babel 6*
{
   "plugins": ["transform-async-to-generator"]
}
*babel 7の.babelrc*
{
   "plugins": ["@babel/plugin-transform-async-to-generator"]
}
*async.js*
let timer = () => {
   return new Promise(resolve => {
      setTimeout(() => {
         resolve("Promise resolved after 5 seconds");
      }, 5000);
   });
};
let out = async () => {
   let msg = await timer();
   console.log(msg);
   console.log("hello after await");
};

out();

コマンド

npx babel async.js --out-file async_es5.js
*async_es5.js*
function _asyncToGenerator(fn) {
   return function () {
      var gen = fn.apply(this, arguments);
      return new Promise(function (resolve, reject) {
         function step(key, arg) {
            try {
               var info = gen[key](arg);
               var value = info.value;
            } catch (error) {
               reject(error);
               return;
            } if (info.done) {
               resolve(value);
            } else {
               return Promise.resolve(value).then(function (value) {
                  step("next", value);
               },
               function (err) {
                  step("throw", err); });
            }
         } return step("next");
      });
   };
}

let timer = () => {
   return new Promise(resolve => {
      setTimeout(() => {
         resolve("Promise resolved after 5 seconds");
      }, 5000);
   });
};
let out = (() => {
   var _ref = _asyncToGenerator(function* () {
      let msg = yield timer();
      console.log(msg);
      console.log("hello after await");
   });

   return function out() {
      return _ref.apply(this, arguments);
   };
})();
out();

約束がサポートされていないブラウザでは機能しないため、ポリフィルを使用する必要があります。

出力

es5の非同期出力

BabelJS-バベルポリフィル

Babel Polyfillは、利用できない機能のWebブラウザーへのサポートを追加します。 Babelは、最新のecmaバージョンから必要なバージョンにコードをコンパイルします。 プリセットに従って構文を変更しますが、使用するオブジェクトまたはメソッドに対しては何もできません。 これらの機能には、下位互換性のためにポリフィルを使用する必要があります。

ポリフィルできる機能

以下は、古いブラウザで使用するときにポリフィルのサポートが必要な機能のリストです-

  • 約束
  • Map
  • Set
  • シンボル
  • 弱マップ
  • 弱点
  • Array.from、Array.includes、Array.of、Array＃find、Array.buffer、Array＃findIndex
  • Object.assign、Object.entries、Object.values

プロジェクトのセットアップを作成し、バベルポリフィルの動作も確認します。

コマンド

npm init

babelに必要なパッケージをインストールします。

babel 6のパッケージ

npm install babel-cli babel-core babel-preset-es2015 --save-dev

babel 7のパッケージ

npm install @babel/cli @babel/core @babel/preset-env --save-dev

これが最終的なpackage.jsonです-

最終パッケージJson

コードをes5にコンパイルするため、es2015をプリセットに追加します。 

*.babelrc for babel 6*

Babelrc 

*babel 7の.babelrc*
{
   "presets":["@babel/env"]
}

ブラウザでコードをテストできるように、ライトサーブをインストールします- 

npm install --save-dev lite-server

package.jsonでコードをコンパイルするためにbabelコマンドを追加しましょう-

Babel Command

lite-serverを呼び出すbuildコマンドも追加しました。

Babel-polyfillはbabel-coreパッケージとともにインストールされます。 babel-polyfillは、以下に示すようにノードモジュールで利用可能になります-

ノードモジュール

約束にさらに取り組み、それとともにbabel-polyfillを使用します。

ES6-約束

let timingpromise = new Promise((resolve, reject) => {
   setTimeout(function() {
      resolve("Promise is resolved!");
   }, 1000);
});

timingpromise.then((msg) => {
   console.log("%c"+msg, "font-size:25px;color:red;");
});

コマンド

npx babel promise.js --out-file promise_es5.js

BabelJS-ES5

"use strict";

var timingpromise = new Promise(function (resolve, reject) {
   setTimeout(function () {
      resolve("Promise is resolved!");
   }, 1000);
});

timingpromise.then(function (msg) {
   console.log("%c"+msg, "font-size:25px;color:red;");
});

コンパイルで何も変更する必要はありません。 promiseのコードはそのまま転載されています。 ただし、promiseをサポートしていないブラウザーは、コードをes5にコンパイルしていてもエラーをスローします。

この問題を解決するには、コンパイルされた最終的なes5コードとともにポリフィルを追加する必要があります。 ブラウザーでコードを実行するには、ノードモジュールからbabel-polyfillファイルを取得し、次のようにpromiseを使用するlファイルに追加します-

インデックス

<html>
   <head>
   </head>
   <body>
      <h1>Babel Polyfill Testing</h1>
      <script type="text/javascript" src="node_modules/babel-polyfill/dist/polyfill.min.js"></script>
      <script type="text/javascript" src="promise_es5.js"></script>
   </body>
</html>

出力

Babel Polyfill Testing

indexlファイルでは、 node_modules のpolyfill.min.jsファイルに続けてpromise_es5.jsを使用しました- 

<script type="text/javascript" src="node_modules/babel-polyfill/dist/polyfill.min.js"></script>

<script type="text/javascript" src="promise_es5.js"></script>

注-ポリフィルファイルは、メインのjavascript呼び出しの前の開始時に使用する必要があります。

文字列のパディング

文字列パディングは、指定された長さに従って、左側から別の文字列を追加します。 文字列パディングの構文は次のとおりです-

構文

str.padStart(length, string);
str.padEnd(length, string);

例

const str = 'abc';

console.log(str.padStart(8, '_'));
console.log(str.padEnd(8, '_'));

出力

_____abc
abc_____

バベル-ES5

npx babel strpad.js --out-file strpad_es5.js

コマンド

'use strict';

var str = 'abc';

console.log(str.padStart(8, '_'));
console.log(str.padEnd(8, '_'));

以下に示すように、jsはbabel-polyfillとともに使用する必要があります-

testl

<!DOCTYPE html>
<html>
   <head>
      <title>BabelJs Testing </title>
   </head>
   <body>
      <script src="node_modules/babel-polyfill/dist/polyfill.min.js" type="text/javascript"></script>
      <script type="text/javascript" src="strpad_es5.js"></script>
   </body>
</html>

文字列パディング出力

Map、Set、WeakSet、WeakMap

このセクションでは、Map、Set、WeakSet、WeakMapについて学習します。

  • Map は、キーと値のペアを持つオブジェクトです。
  • Set もオブジェクトですが、一意の値を持ちます。
  • WeakMapおよびWeakSet は、キーと値のペアを持つオブジェクトでもあります。

Map、Set、WeakMap、およびWeakSetは、ES6に追加された新機能です。 古いブラウザで使用されるようにトランスパイルするには、ポリフィルを使用する必要があります。 例に取り組み、ポリフィルを使用してコードをコンパイルします。

例

let m = new Map();//map example
m.set("0","A");
m.set("1","B");
console.log(m);

let set = new Set();//set example
set.add('A');
set.add('B');
set.add('A');
set.add('B');
console.log(set);

let ws = new WeakSet();//weakset example
let x = {};
let y = {};
ws.add(x);
console.log(ws.has(x));
console.log(ws.has(y));

let wm = new WeakMap();//weakmap example
let a = {};
wm.set(a, "hello");
console.log(wm.get(a));

出力

Map(2) {"0" => "A", "1" => "B"}
Set(2) {"A", "B"}
true
false
hello

コマンド

npx babel set.js --out-file set_es5.js

バベル-ES5

"use strict";

var m = new Map();//map example
m.set("0", "A");
m.set("1", "B");
console.log(m);

var set = new Set();//set example
set.add('A');
set.add('B');
set.add('A');
set.add('B');
console.log(set);

var ws = new WeakSet();//weakset example
var x = {};
var y = {};
ws.add(x);
console.log(ws.has(x));
console.log(ws.has(y));

var wm = new WeakMap();//weakmap example
var a = {};
wm.set(a, "hello");
console.log(wm.get(a));

以下に示すように、jsはbabel-polyfillとともに使用する必要があります-

testl

<!DOCTYPE html>
<html>
   <head>
      <title>BabelJs Testing</title>
   </head>
   <body>
      <script src="node_modules/babel-polyfill/dist/polyfill.min.js" type="text/javascript"></script>
      <script type="text/javascript" src="set_es5.js"></script>
   </body>
</html>

出力

WeakMap出力

配列メソッド

配列では多くのプロパティとメソッドを使用できます。たとえば、array.from、array.includesなど。

これをよりよく理解するために、次の例での作業を検討してみましょう。

例

*arraymethods.js*
var arrNum = [1, 2, 3];

console.log(arrNum.includes(2));
console.log(Array.from([3, 4, 5], x => x + x));

出力 

true
[6, 8, 10]

コマンド

npx babel arraymethods.js --out-file arraymethods_es5.js

Babel-es5

"use strict";

var arrNum = [1, 2, 3];

console.log(arrNum.includes(2));
console.log(Array.from([3, 4, 5], function (x) {
return x + x;
}));

配列で使用されるメソッドはそのまま印刷されます。 それらを古いブラウザで動作させるには、以下に示すように、開始時にポリフィルファイルを追加する必要があります-

インデックス

<html>
   <head></head>
   <body>
      <h1>Babel Polyfill Testing</h1>
      <script type="text/javascript" src="node_modules/babel-polyfill/dist/polyfill.min.js"></script>
      <script type="text/javascript" src="arraymethods_es5.js"></script>
   </body>
</html>

出力

配列メソッドJs

BabelJS-Babel CLI

BabelJSには組み込みのコマンドラインインターフェイスが付属しており、使いやすいコマンドを使用してJavaScriptコードを各ECMAスクリプトに簡単にコンパイルできます。 この章では、これらのコマンドの使用について説明します。

まず、プロジェクトにbabel-cliをインストールします。 コードのコンパイルにはbabeljsを使用します。

babel-cliをいじるプロジェクト用のフォルダーを作成します。

コマンド

npm init

表示

ディスプレイ

上記のプロジェクト用に作成されたPackage.json-

Display Json

コマンドを実行してbabel-cliをインストールしましょう。

babel 6のパッケージ

npm install --save-dev babel-cli

babel 7のパッケージ

npm install --save-dev @babel/cli

表示

パッケージのインストール

babel-cliをインストールしました。ここに更新されたpackage.jsonがあります-

更新されたパッケージ

これに加えて、babel-presetとbabel-coreをインストールする必要があります。 インストールのコマンドを見てみましょう。

babel 6のパッケージ

npm install --save-dev babel-preset-env
npm install --save-dev babel-core

babel 7のパッケージ

npm install --save-dev @babel/core
npm install --save-dev @babel/preset-env

ここに上記のコマンドの更新されたpackage.jsonがあります-

更新されたパッケージJson

下位互換性を持たせるために記述するJavaScriptコードにコンパイルする必要があるため、ECMA Script 5にコンパイルします。 そのためには、プリセット、つまりコンパイルが行われるesバージョンを探すようにbabelに指示する必要があります。 以下に示すように作成されたプロジェクトのルートフォルダーに .babelrc> ファイルを作成する必要があります。

次のプリセットの詳細を持つjsonオブジェクトが含まれています- 

{ "presets": ["env"] }

babel 7の場合、.babelrcは次のとおりです- 

{
   "presets":["@babel/env"]
}

プロジェクトのローカルにbabelをインストールしました。 私たちのプロジェクトでbabelを使用するには、次のようにpackage.jsonで同じものを指定する必要があります-

インストールされたBabel Local

JSファイルをコンパイルする

これで、JavaScriptファイルをコンパイルする準備ができました。 プロジェクトにフォルダーsrcを作成します。このフォルダに、main.jsというファイルを作成し、以下に示すようにes6 javascriptコードを記述します-

コマンド

npx babel src/main.js

出力

コンパイルJS

上記の場合、main.jsからのコードは、es5バージョンのターミナルに表示されます。 es6からの矢印関数は、上記のようにes5に変換されます。 コンパイルされたコードを端末に表示する代わりに、以下に示すように別のファイルに保存します。

プロジェクト内に、コンパイル済みファイルを保存するフォルダーを作成しました。 次に、出力をコンパイルして目的の場所に保存するコマンドを示します。

コマンド

npx babel src/main.js --out-file out/main_out.js

出力

JS出力のコンパイル

コマンド—​out-fileのオプションは、選択したファイルの場所に出力を保存するのに役立ちます。

メインファイルに変更を加えるたびにファイルを更新する場合は、以下に示すように、コマンドに*-watch または *-w オプションを追加します。

コマンド

npx babel src/main.js --watch --out-file out/main_out.js

出力

更新されたファイル出力

メインファイルに変更を加えることができます。この変更はコンパイルされたファイルに反映されます。

上記の場合、ログメッセージを変更し、*-watch *オプションは変更をチェックし続け、同じ変更がコンパイル済みファイルに追加されます。

メインファイルの変更

コンパイルされたファイル

コンパイル済みファイル

前のセクションでは、個々のファイルをコンパイルする方法を学びました。 次に、ディレクトリをコンパイルし、コンパイルしたファイルを別のディレクトリに保存します。

srcフォルダーに、 main1.js というもう1つのjsファイルを作成します。 現在、srcフォルダーには2つのjavascriptファイル main.js および main1.js があります。

以下は、ファイル内のコードです- 

*main.js*
var arrowfunction = () => {
   console.log("Added changes to the log message");
}
*main1.js*
var handler = () => {
   console.log("Added one more file");
}

次のコマンドは、 src フォルダーからコードをコンパイルし、out/フォルダーに保存します。 out/ フォルダーからすべてのファイルを削除し、空のままにしました。 コマンドを実行し、out/フォルダーの出力を確認します。

コマンド

npx babel src --out-dir out

outフォルダーに2つのファイルがあります-main.jsとmain1.js 

*main.js*
"use strict";

var arrowfunction = function arrowfunction() {
   console.log("Added changes to the log message");
};
*main1.js*
"use strict";

var handler = function handler() {
   console.log("Added one more file");
};

次に、以下に示すコマンドを実行して、両方のファイルをbabeljsを使用して単一のファイルにコンパイルします。

コマンド

npx babel src --out-file out/all.js

出力

"use strict";

var arrowfunction = function arrowfunction() {
   console.log("Added changes to the log message");
};
"use strict";

var handler = function handler() {
console.log("Added one more file");
};

一部のファイルのコンパイルを無視したい場合、以下に示すように—​ignoreオプションを使用できます。

コマンド

npx babel src --out-file out/all.js --ignore src/main1.js

出力

*all.js*
"use strict";

var arrowfunction = function arrowfunction() {
   console.log("Added changes to the log message");
};

ファイルのコンパイル中に使用されるプラグインオプションを使用できます。 プラグインを利用するには、以下に示すようにインストールする必要があります。

コマンド

npm install --save-dev babel-plugin-transform-exponentiation-operator
*expo.js*
let sqr = 9 ** 2;
console.log(sqr);

コマンド

npx babel expo.js --out-file expo_compiled.js --plugins=babel-plugin-transform-exponentiation-operator

出力

"use strict";

var sqr = Math.pow(9, 2);
console.log(sqr);

以下に示すように、コマンドでプリセットを使用することもできます。

コマンド

npx babel src/main.js --out-file main_es5.js --presets=es2015

上記のケースをテストするために、.babelrcからプリセットオプションを削除しました。 

*main.js*
var arrowfunction = () => {
   console.log("Added changes to the log message");
}
*main_es5.js*
"use strict";

var arrowfunction = function arrowfunction() {
   console.log("Added changes to the log message");
};

また、次のようにコマンドラインから.babelrcを無視することができます- 

npx babel --no-babelrc src/main.js --out-file main_es5.js --presets=es2015

上記のケースをテストするために、.babelrcにプリセットを追加しました。コマンドに—​no-babelrcを追加したため、同じものは無視されます。 main_es5.jsファイルの詳細は次のとおりです- 

*main_es5.js*
"use strict";

var arrowfunction = function arrowfunction() {
   console.log("Added changes to the log message");
};

BabelJS-バベルプリセット

Babelプリセットは、指定されたモードでトランスパイルするように指示するbabel-transpilerの構成の詳細です。 ここでは、この章で説明する最も一般的なプリセットをいくつか紹介します-

  • ES2015
  • Env
  • 反応する

コードを変換する環境を持つプリセットを使用する必要があります。 たとえば、_es2015_プリセットはコードを_es5_に変換します。 値が_env_のプリセットも_es5_に変換されます。 また、追加機能、つまりオプションもあります。 機能を最新バージョンのブラウザーでサポートする場合、babelはそれらのブラウザーで機能がサポートされていない場合にのみコードを変換します。 プリセット_react_を使用すると、Babelは反応するときにコードを変換します。

プリセットを使用するには、プロジェクトのルートフォルダーに.babelrcファイルを作成する必要があります。 動作を示すために、以下に示すプロジェクト設定を作成します。

コマンド

npm init

作業プリセット

babel cli、babel coreなどとともに、次のように必要なbabelプリセットをインストールする必要があります。

Babel 6パッケージ

npm install babel-cli babel-core babel-preset-es2015 --save-dev

Babel 7パッケージ

npm install @babel/cli @babel/core @babel/preset-env --save-dev

注-babel-preset-es2015はbabel 7以降では非推奨です。 

*es2015または@ babel/env*

プロジェクトのルートに.babelrcファイルを作成します（babel 6）-

Babelrc env

babelrcでは、プリセットはes2015です。 これは、コードをes2015に変換するというbabelコンパイラーへの指示です。.

バベル7の場合、次のようにプリセットを使用する必要があります- 

{
   "presets":["@babel/env"]
}

ここにインストール後のpackage.jsonがあります-

インストール後のパッケージJson

babelをローカルにインストールしたので、package.jsonのスクリプトセクションにbabelコマンドを追加しました。

プリセットes2015を使用してトランスコンパイルをチェックする簡単な例に取り組みましょう。

例

*main.js*
let arrow = () => {
   return "this is es6 arrow function";
}

以下に示すように、es5に変換されます。

コマンド

npx babel main.js --out-file main_es5.js
*main_es5.js*
"use strict";

var arrow = function arrow() {
   return "this is es6 arrow function";
};

Env

Envプリセットを使用して、トランスコードする最終コードの環境を指定できます。

上記で作成したのと同じプロジェクトセットアップを使用し、次に示すようにes2015からenvにプリセットを変更します。

プリセットEs2015の変更

さらに、babel-preset-envをインストールする必要があります。 以下のコマンドを実行して、同じものをインストールします。

コマンド

npm install babel-preset-env --save-dev

main.jsを再度コンパイルし、出力を確認します。 

*main.js*
let arrow = () => {
   return "this is es6 arrow function";
}

コマンド

npx babel main.js --out-file main_env.js
*main_env.js*
"use strict";

var arrow = function arrow() {
   return "this is es6 arrow function";
};

トランスコンパイルされたコードはes5であることがわかりました。 コードが実行される環境がわかっている場合は、このプリセットを使用して指定できます。 たとえば、次のようにブラウザをchromeとfirefoxの最新バージョンとして指定した場合。

ブラウザ

コマンド

npx babel main.js --out-file main_env.js
*main_env.js*
"use strict";

let arrow = () => {
   return "this is es6 arrow function";
};

現在、矢印関数の構文をそのまま取得しています。 ES5構文には組み込まれていません。 これは、コードでサポートしたい環境がすでにarrow関数をサポートしているためです。

Babelはbabel-preset-envを使用して環境に基づいてコードをコンパイルします。 以下に示すように、nodejs環境に基づいてコンパイルをターゲットにすることもできます

Nodejs環境

コードの最終的なコンパイルは次のとおりです。

コマンド

npx babel main.js --out-file main_env.js
*main_env.js*
"use strict";

let arrow = () => {
   return "this is es6 arrow function";
};

Babelは、nodejsの現在のバージョンに従ってコードをコンパイルします。

反応プリセット

Reactjsを使用している場合は、reactプリセットを使用できます。 簡単な例に取り組み、反応プリセットを使用して出力を確認します。

プリセットを使用するには、次のようにbabel-preset-react（babel 6）をインストールする必要があります- 

npm install --save-dev babel-preset-react

バベル7の場合、それは次のとおりです- 

npm install --save-dev @babel/preset-react

babelrcの変更は、babel6について次のとおりです-.

Babelrcの変更

babel 7の場合 

{
   "presets": ["@babel/preset-react"]
}
*main.js*
<h1>Hello, world!</h1>

コマンド

npx babel main.js --out-file main_env.js
*main_env.js*
React.createElement(
   "h1",
   null,
   "Hello, world!"
);

main.jsのコードは、preset：reactを使用してreactjs構文に変換されます。

BabelJS-BabelとWebpackの使用

Webpackは、js、スタイル、画像などの依存関係を持つすべてのモジュールをパックするモジュールバンドラーです。 静的アセット.js、.css、.jpg、.pngなどに変換します。 Webpackには、必要な形式にコンパイルするのに役立つプリセットが付属しています。 たとえば、ES5または6または7などでコードをコンパイルするのに役立つes2015またはenvプリセットなど、react形式で最終出力を取得するのに役立つ反応プリセット。 プロジェクトのセットアップでbabel 6を使用しました。 babel7に切り替える場合は、@ babel/babel-package-nameを使用してbabelの必要なパッケージをインストールします。

ここでは、babelとwebpackを使用したプロジェクトのセットアップについて説明します。 __というフォルダーを作成し、Visual Studio IDEで同じフォルダーを開きます。

プロジェクトのセットアップを作成するには、次のようにnpm initbabelwebpackを実行します-

Babel Webpack

これは、npm initの後に作成されたpackage.jsonです-

Init Webpack

次に、babelとwebpackで作業するために必要なパッケージをインストールします。 

npm install --save-dev webpack
npm install --save-dev webpack-dev-server
npm install --save-dev babel-core
npm install --save-dev babel-loader
npm install --save-dev babel-preset-env

ここにインストール後のPackage.jsonがあります-

インストール後のパッケージ

ここで、jsファイルをバンドルするためのすべての詳細を含むwebpack.config.jsファイルを作成します。 これらのファイルは、babelを使用してes5にコンパイルされます。

サーバーを使用してwebpackを実行するには、webpack-serverを使用します。 以下はそれに追加された詳細です-

Webpackサーバー

webpack-dev-serverを起動し、最終ファイルが保存されているパスを更新するpublishコマンドを追加しました。 現在、最終ファイルの更新に使用するパスは/devフォルダーです。

Webpackを使用するには、次のコマンドを実行する必要があります- 

npm run publish

まず、webpack.config.jsファイルを作成する必要があります。 これらには、webpackが機能するための構成の詳細が含まれます。

ファイル内の詳細は次のとおりです- 

var path = require('path');

module.exports = {
   entry: {
      app: './src/main.js'
   },
   output: {
      path: path.resolve(__dirname, 'dev'),
      filename: 'main_bundle.js'
   },
   mode:'development',
   module: {
      rules: [
         {
            test:/\.js$/,
            include: path.resolve(__dirname, 'src'),
            loader: 'babel-loader',
            query: {
               presets: ['env']
            }
         }
      ]
   }
};

ファイルの構造は上記のとおりです。 現在のパスの詳細を提供するhパスで始まります。 

var path = require('path');//gives the current path

次はmodule.exportsオブジェクトで、プロパティのエントリ、出力、モジュールがあります。 エントリは開始点です。 ここでは、コンパイルする必要があるメインのjsファイルを指定する必要があります。 

entry: {
   app: './src/main.js'
},
  • path.resolve（_dirname、 ‘src/main.js’）*-ディレクトリ内のsrcフォルダーとそのフォルダー内のmain.jsを探します。

出力

output: {
   path: path.resolve(__dirname, 'dev'),
   filename: 'main_bundle.js'
},

出力は、パスとファイル名の詳細を含むオブジェクトです。 パスは、コンパイルされたファイルが保持されるフォルダーを保持し、ファイル名は、lファイルで使用される最終的なファイルの名前を示します。

モジュール

module: {
   rules: [
      {
         test:/\.js$/,
         include: path.resolve(__dirname, 'src'),
         loader: 'babel-loader',
         query: {
            presets: ['env']
         }
      }
   ]
}

モジュールは、ルールの詳細を持つオブジェクトです。 次のプロパティがあります-

  • test
  • 含める
  • ローダ
  • 問い合わせ

_Test_は、.jsで終わるすべてのjsファイルの詳細を保持します。 パターンがあり、指定されたエントリポイントの最後で.jsを検索します。

_Include_は、参照するファイルで使用中のフォルダーを指示します。

_Loader_は、コードのコンパイルにbabel-loaderを使用します。

_Query_には、プロパティプリセットがあります。これは、値env – es5またはes6またはes7の配列です。

srcフォルダーと_main.js_フォルダーを作成します。 ES6でjsコードを記述します。 後で、コマンドを実行して、webpackおよびbabelを使用してes5にコンパイルされることを確認します。 

*src/main.js*
let add = (a,b) => {
   return a+b;
};
let c = add(10, 20);
console.log(c);

コマンドを実行します- 

npm run pack

コンパイルされたファイルは次のようになります- 

*dev/main_bundle.js*
!function(e) {
   var t = {};
   function r(n) {
      if(t[n])return t[n].exports;var o = t[n] = {i:n,l:!1,exports:{}};
      return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports
   }
   r.m = e,r.c = t,r.d = function(e,t,n) {
      r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})
   },
   r.r = function(e) {
      "undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})
   },
   r.t = function(e,t) {
      if(1&t&&(e = r(e)),8&t)return e;
      if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;
      var n = Object.create(null);
      if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t) {return e[t]}.bind(null,o));
      return n
   },
   r.n = function(e) {
      var t = e&&e.__esModule?function() {return e.default}:function() {return e};
      return r.d(t,"a",t),t
   },
   r.o = function(e,t) {return Object.prototype.hasOwnProperty.call(e,t)},
   r.p = "",r(r.s = 0)
}([function(e,t,r) {"use strict";var n = function(e,t) {return e+t}(10,20);console.log(n)}]);
!function(e) {
   var t = {};
   function r(n) {
      if(t[n])return t[n].exports;
      var o = t[n] = {i:n,l:!1,exports:{}};
      return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports
   }
   r.m = e,r.c = t,r.d = function(e,t,n) {
      r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})
   },
   r.r = function(e) {
      "undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})
   },
   r.t = function(e,t) {
      if(1&t&&(e=r(e)),
      8&t)return e;
      if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;
      var n = Object.create(null);
      if(
         r.r(n),
         Object.defineProperty(n,"default",{enumerable:!0,value:e}),
         2&t&&"string"!=typeof e
      )
      for(var o in e)r.d(n,o,function(t) {return e[t]}.bind(null,o));
      return n
   },
   r.n = function(e) {
      var t = e&&e.__esModule?function() {return e.default}:function() {return e};
      return r.d(t,"a",t),t
   },
   r.o = function(e,t) {
      return Object.prototype.hasOwnProperty.call(e,t)
   },
   r.p = "",r(r.s = 0)
}([function(e,t,r) {
   "use strict";
   var n = function(e,t) {return e+t}(10,20);
   console.log(n)
}]);

コードは上記のようにコンパイルされます。 Webpackは内部的に必要なコードを追加し、main.jsのコードは最後に表示されます。 上記のように値をコンソール化しました。

次のようにlファイルに最終的なjsファイルを追加します- 

<html>
   <head></head>
   <body>
      <script type="text/javascript" src="dev/main_bundle.js"></script>
   </body>
</html>

コマンドを実行します- 

npm run publish

Module Webpack

出力を確認するには、ファイルを開くことができます- 

*http：//localhost：8080/*

モジュールWebpack出力

上記のコンソール値を取得します。 次に、webpackとbabelを使用して、単一のファイルにコンパイルしてみましょう。

webpackを使用して、複数のjsファイルを単一のファイルにバンドルします。 Babelは、es6コードをes5にコンパイルするために使用されます。

今、src/フォルダに2つのjsファイルがあります-main.jsとPerson.jsは次のように- 

*person.js*
export class Person {
   constructor(fname, lname, age, address) {
      this.fname = fname;
      this.lname = lname;
      this.age = age;
      this.address = address;
   }

   get fullname() {
      return this.fname +"-"+this.lname;
   }
}

エクスポートを使用してPersonクラスの詳細を使用しました。 

*main.js*
import {Person} from './person'
var a = new Person("Siya", "Kapoor", "15", "Mumbai");
var persondet = a.fullname;
console.log(persondet);

main.jsでは、ファイルパスからPersonをインポートしました。

注-person.jsを含める必要はなく、ファイルの名前だけを含める必要があります。 Personクラスのオブジェクトを作成し、上記のように詳細をコンソール化しました。

Webpackは person.js と main.js を組み合わせ、 dev/main_bundle.js を1つのファイルとして更新します。 ブラウザで出力を確認するには、コマンド npm run publish を実行します-

Dev Main Bundle

BabelJS-BabelとJSXの操作

この章では、JSXとbabelの操作について理解します。 詳細に入る前に、JSXとは何かを理解しましょう。

JSXとは何ですか？

JSXは、xml構文を組み合わせたJavaScriptコードです。 JSXタグには、XMLのように見えるタグ名、属性、および子があります。

Reactは、通常のJavaScriptではなくJSXをテンプレート化に使用します。 使用する必要はありませんが、それに付属するいくつかの長所を次に示します。

  • コードをJavaScriptにコンパイルしながら最適化を実行するため、高速です。
  • また、タイプセーフであり、コンパイル中にほとんどのエラーをキャッチできます。
  • HTMLに精通していれば、テンプレートを簡単かつ迅速に作成できます。

プロジェクトのセットアップでbabel 6を使用しました。 babel 7に切り替える場合は、 @ babel/babel-package-name を使用してbabelの必要なパッケージをインストールします。

プロジェクトのセットアップを作成し、webpackを使用して、Babelを使用して通常のJavaScriptに反応するjsxをコンパイルします。

プロジェクトのセットアップを開始するには、以下のbabel、react、webpackのインストール用のコマンドを実行します。

コマンド

npm init

Webpackインストール

次に、作業に必要なパッケージをインストールします-babel、webpack、jsx- 

npm install --save-dev webpack
npm install --save-dev webpack-cli
npm install --save-dev webpack-dev-server
npm install --save-dev babel-core
npm install --save-dev babel-loader
npm install --save-dev babel-preset-es2015
npm install --save-dev babel-preset-react
npm install --save-dev react
npm install --save-dev react-dom

ここにインストール後のpackage.jsonがあります-

Work_With_Babel_Webpack

ここで、webpack.config.jsファイルを作成します。このファイルには、jsファイルをバンドルしてbabelを使用してes5にコンパイルするためのすべての詳細が含まれます。

サーバーを使用してwebpackを実行するには、webpack-serverと呼ばれるものがあります。 publishというコマンドを追加しました。このコマンドはwebpack-dev-serverを起動し、最終ファイルが保存されているパスを更新します。 現在、最終ファイルの更新に使用するパスは/devフォルダーです。

webpackを使用するには、次のコマンドを実行する必要があります- 

npm run publish
*webpack.config.js* ファイルを作成します。このファイルには、webpackが機能するための構成の詳細が含まれています。

ファイル内の詳細は次のとおりです- 

var path = require('path');

module.exports = {
   entry: {
      app: './src/main.js'
   },
   output: {
      path: path.resolve(__dirname, 'dev'),
      filename: 'main_bundle.js'
   },
   mode:'development',
   module: {
      rules: [
         {
            test:/\.(js|jsx)$/,
            include: path.resolve(__dirname, 'src'),
            loader: 'babel-loader',
            query: {
               presets: ['es2015','react']
            }
         }
      ]
   }
};

ファイルの構造は上記のとおりです。 現在のパスの詳細を示すパスで始まります。 

var path = require('path');//gives the current path

次はmodule.exportsオブジェクトで、プロパティのエントリ、出力、モジュールがあります。

エントリーは出発点です。 ここで、コンパイルするメインのjsファイルを指定する必要があります。 

entry: {
   app: './src/main.js'
},
  • path.resolve（_dirname、 ‘src/main.js’）-ディレクトリ内のsrcフォルダーと、そのフォルダー内の *main.js を探します。

出力

output: {
   path: path.resolve(__dirname, 'dev'),
   filename: 'main_bundle.js'
},

出力は、パスとファイル名の詳細を含むオブジェクトです。 パスはコンパイルされたファイルが保持されるフォルダーを保持し、ファイル名は l ファイルで使用される最終的なファイルの名前を示します。

モジュール

module: {
   rules: [
      {
         test:/\.(js|jsx)$/,
         include: path.resolve(__dirname, 'src'),
         loader: 'babel-loader',
         query: {
            presets: ['es2015','react']
         }
      }
   ]
}
  • _Module_は、test、include、loader、queryなどのプロパティを持つルールの詳細を持つオブジェクトです。
  • _Test_は、.jsおよび.jsxで終わるすべてのjsファイルの詳細を保持します。指定されたエントリポイントの末尾で.jsおよび.jsxを検索するパターンがあります。
  • _Include_は、ファイルの検索に使用するフォルダーを指示します。
  • _Loader_は、コードのコンパイルにbabel-loaderを使用します。
  • _Query_には、プロパティプリセットがあります。これは、env – es5またはes6またはes7の値を持つ配列です。 es2015を使用し、プリセットとして反応しました。

フォルダー* src/.*を作成し、その中に main.js と App.jsx を追加します。 

*App.jsx*
import React from 'react';

class App extends React.Component {
   render() {
         var style = {
         color: 'red',
         fontSize: 50
      };
      return (
         <div style={style}>
            Hello World!!!
         </div>
      );
   }
}
export default App;
*main.js*
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(, document.getElementById('app'));

次のコマンドを実行して.jsファイルをバンドルし、プリセット es2015 および react を使用して変換します。

コマンド

npm run pack

Convert_Using_Presets 

*main_bundle.js* をdevフォルダーから *indexl* に追加します-
<!DOCTYPE html>
<html lang = "en">
   <head>
      <meta charset = "UTF-8">
      <title>React App</title>
   </head>
   <body>
      <div id = "app"></div>
      <script src = "dev/main_bundle.js"></script>
   </body>
</html>

コマンド

npm run publish

Dev Folder To Index

出力

Dev Folder To Index Output

「https://www.finddevguides.com/index.php?title=Babeljs-quick-guide&oldid=78705」から取得
Powered by MediaWiki