Babeljs-project-setup-using-babel6
BabelJS-Babel 6を使用したプロジェクトのセットアップ
この章では、プロジェクト内でbabeljsを使用する方法について説明します。 nodejsを使用してプロジェクトを作成し、httpローカルサーバーを使用してプロジェクトをテストします。
プロジェクト設定の作成
このセクションでは、プロジェクトのセットアップを作成する方法を学びます。
新しいディレクトリを作成し、次のコマンドを実行してプロジェクトを作成します-
npm init
出力
実行すると、上記のコマンドは次の出力を生成します-
作成されるpackage.jsonは次のとおりです-
babeljsの使用を開始するために必要なパッケージをインストールします。 次のコマンドを実行して、_babel-cli、babel-core、babel-preset-es2015_をインストールします。
npm install babel-cli babel-core babel-preset-es2015 --save-dev
出力
実行すると、上記のコマンドは次の出力を生成します-
Package.jsonは次のように更新されます-
jsファイルをテストするには、httpサーバーが必要です。 次のコマンドを実行して、httpサーバーをインストールします-
npm install lite-server --save-dev
package.jsonに次の詳細を追加しました-
スクリプトでは、Babelは_src_フォルダーからscripts.jsをトランスコンパイルし、_scripts.bundle.js_という名前で_dev_フォルダーに保存します。 package.jsonに必要なコードをコンパイルするための完全なコマンドを追加しました。 さらに、_lite_server_を起動して変更をテストする_build_が追加されます。
src/scripts.jsには次のようなJavaScriptがあります-
class Student {
constructor(fname, lname, age, address) {
this.fname = fname;
this.lname = lname;
this.age = age;
this.address = address;
}
get fullname() {
return this.fname +"-"+this.lname;
}
}
次のように、indexlで変換されたスクリプトを呼び出しました-
<html>
lt;head></head>
<body>
<script type="text/javascript" src="dev/scripts.bundle.js?a=11"></script>
<h1 id="displayname"></h1>
<script type="text/javascript">
var a = new Student("Siya", "Kapoor", "15", "Mumbai");
var studentdet = a.fullname;
document.getElementById("displayname").innerHTML = studentdet;
</script>
</body>
</html>
babelを呼び出してコードをコンパイルする次のコマンドを実行する必要があります。 コマンドはpackage.jsonからBabelを呼び出します-
npm run babel
scripts.bundle.jsは、devフォルダに作成された新しいjsファイルです-
*dev/scripts.bundle.js* の出力は次のとおりです-
"use strict";
var _createClass = function () {
function defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];
descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;
if ("value" in descriptor) descriptor.writable = true;
Object.defineProperty(target, descriptor.key, descriptor);
}
}
return function (Constructor, protoProps, staticProps) {
if (protoProps) defineProperties(Constructor.prototype, protoProps);
if (staticProps) defineProperties(Constructor, staticProps);
return Constructor;
};
}();
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
var Student = function () {
function Student(fname, lname, age, address) {
_classCallCheck(this, Student);
this.fname = fname;
this.lname = lname;
this.age = age;
this.address = address;
}
_createClass(Student, [{
key: "fullname",
get: function get() {
return this.fname + "-" + this.lname;
}
}]);
return Student;
}();
今、私たちは次のコマンドを実行してサーバーを起動しましょう-
npm run build
コマンドを実行すると、ブラウザでURLが開きます-
出力
上記のコマンドは、次の出力を生成します-