Babeljs-babel-presets

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構文に変換されます。