Babeljs-babel-cli

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");
};