BabelJS-BabelJS 및 Gulp 작업

이 장에서는 babel과 gulp를 사용하여 프로젝트 설정을 생성합니다. Gulp는 Node.js를 플랫폼으로 사용하는 작업 실행기입니다. Gulp는 es6에서 es5로 JavaScript 파일을 변환하는 작업을 실행하고 완료되면 서버를 시작하여 변경 사항을 테스트합니다. 우리는 프로젝트 설정에서 바벨 6을 사용했습니다. 바벨 7로 전환하려면 다음을 사용하여 바벨의 필수 패키지를 설치하십시오.@babel/babel-package-name.

먼저 npm 명령을 사용하여 프로젝트를 만들고 시작하는 데 필요한 패키지를 설치합니다.

명령

npm init

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

사전 설정 환경 세부 정보를 .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']);

우리는 꿀꺽 꿀꺽 꿀꺽 삼키는 작업, [ '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;
   }
}

Command: gulp start

dev/main.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 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;
}();

Index.html

이것은 사용하여 수행됩니다 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>

Output