BabelJS-CLI

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

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

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

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

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

バベルクリ

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

npm install --save-dev babel-cli

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

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

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

npm install --save-dev babel-core

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

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

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

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

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

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

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

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

npx babel index.js

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

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

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

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