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

この章では、プロジェクト内でbabeljsを使用する方法について説明します。 nodejsを使用してプロジェクトを作成し、httpローカルサーバーを使用してプロジェクトをテストします。

プロジェクト設定の作成

このセクションでは、プロジェクトのセットアップを作成する方法を学びます。

新しいディレクトリを作成し、次のコマンドを実行してプロジェクトを作成します-

npm init

出力

実行すると、上記のコマンドは次の出力を生成します-

Npm Init Output

作成されるpackage.jsonは次のとおりです-

Package Json Create

babeljsの使用を開始するために必要なパッケージをインストールします。次のコマンドを実行して、_babel-cli、babel-core、babel-preset-es2015_をインストールします。

npm install babel-cli babel-core babel-preset-es2015 --save-dev

出力

実行すると、上記のコマンドは次の出力を生成します-

Npm Install Output

Package.jsonは次のように更新されます-

Package Json Update

jsファイルをテストするには、httpサーバーが必要です。次のコマンドを実行して、httpサーバーをインストールします-

npm install lite-server --save-dev

package.jsonに次の詳細を追加しました-

httpサーバーのインストール

スクリプトでは、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

Call Babel

scripts.bundle.jsは、devフォルダに作成された新しいjsファイルです-

新しい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が開きます-

Npm Commond Run

出力

上記のコマンドは、次の出力を生成します-

Npm Commond Run Output

Babeljs-project-setup-using-babel6

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

プロジェクト設定の作成

出力

出力

出力

目次