Babeljs-project-setup-using-babel7

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

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

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

コマンド

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

npm init

Copy

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

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

Copy

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

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

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

Babelrcの作成

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

Copy

src/main.js

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

Copy

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

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

Copy

main_es5.js

"use strict";

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

Copy

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

Copy

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

Copy

test.ts

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

getName("Siya");

Copy

.babelrc

Babelrc Typescript

コマンド

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

Copy

test.js

"use strict";

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

getName("Siya");

Copy