BabelJS-BabelJSとGulpの操作

この章では、babelとgulpを使用してプロジェクトのセットアップを作成します。 GulpはNode.jsをプラットフォームとして使用するタスクランナーです。 GulpはJavaScriptファイルをes6からes5に変換するタスクを実行し、完了したらサーバーを起動して変更をテストします。プロジェクトのセットアップでbabel 6を使用しました。 babel 7に切り替える場合は、 @ babel/babel-package-name を使用してbabelの必要なパッケージをインストールします。

最初にnpmコマンドを使用してプロジェクトを作成し、最初に必要なパッケージをインストールします。

コマンド

npm init

Babelパッケージ名

gulpbabelというフォルダーを作成しました。さらに、gulpおよびその他の必要な依存関係をインストールします。

コマンド

npm install gulp --save-dev
npm install gulp-babel --save-dev
npm install gulp-connect --save-dev
npm install babel-preset-env --save-dev
npm install babel-core --save-dev

Gulpのインストール

次のように、プリセット環境の詳細を .babelrc ファイルに追加します。

プリセット環境の詳細

*gulpfile.js*

var gulp =require('gulp');
var babel =require('gulp-babel');
var connect = require("gulp-connect");
gulp.task('build', () => {
   gulp.src('src/./*.js')
      .pipe(babel())
      .pipe(gulp.dest('./dev'))
});

gulp.task('watch', () => {
   gulp.watch('./*.js', ['build']);
});

gulp.task("connect", function () {
   connect.server({
      root: ".",
      livereload: true
   });
});

gulp.task('start', ['build', 'watch', 'connect']);

gulpで3つのタスク、['build'、 'watch'、 'connect']を作成しました。 srcフォルダーで利用可能なすべてのjsファイルは、次のようにbabelを使用してes5に変換されます-

gulp.task('build', () => {
   gulp.src('src/./*.js')
      .pipe(babel())
      .pipe(gulp.dest('./dev'))
});

最終的な変更はdevフォルダーに保存されます。 Babelは .babelrc のプリセットの詳細を使用します。他のプリセットに変更する場合は、*。babelrc *ファイルの詳細を変更できます。

es6 javascriptを使用してsrcフォルダーに.jsファイルを作成し、 gulp start コマンドを実行して変更を実行します。

*src/main.js*

class Person {
   constructor(fname, lname, age, address) {
      this.fname = fname;
      this.lname = lname;
      this.age = age;
      this.address = address;
   }

   get fullname() {
      return this.fname +"-"+this.lname;
   }
}

コマンド：gulp start *

Command Gulp Start

*dev/main.js*

これは、バベルを使用してtranspiledされています-

"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 Person = function () {
   function Person(fname, lname, age, address) {
      _classCallCheck(this, Person);
      this.fname = fname;
      this.lname = lname;
      this.age = age;
      this.address = address;
   }
   _createClass(Person, [{
      key: "fullname",
      get: function get() {
         return this.fname + "-" + this.lname;
      }
   }]);

   return Person;
}();

インデクセル

これは、 transpiled dev/main.js を使用して行われます-

<html>
   <head></head>
   <body>
      <script type="text/javascript" src="dev/main.js"></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>

出力

Transpiled Dev Output

Babeljs-working-with-gulp

BabelJS-BabelJSとGulpの操作

コマンド

コマンド