Babeljs-project-setup-using-babel7
提供:Dev Guides
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 ファイルを作成します-
*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
コマンド
npx babel src/test.ts --out-file test.js
test.js
"use strict";
var getName = function getName(person) {
return "Hello, " + person;
};
getName("Siya");