gulp + Babel 비망록

gulp 설치

Babel 설치

{
  "presets": ["es2015"]
}

var gulp = require('gulp'); //gulp本体の読み込み
var babel = require('gulp-babel'); //gulpプラグインの読み込み　今回はbabel

// babel
//各処理を実行した結果を.pipe()で次に渡してあげてる
gulp.task('babel', function () { //このタスクにbabelって名前をつける
    gulp.src('./es2015/script.js') //変換したいES2015で記述したファイルを指定
    .pipe(babel()) //babel()でバベってくれと記述
    .pipe(gulp.dest('./js')); //gulp.dest()でファイルの書き出し 今回はjsフォルダに
});

ES2015 파일 만들기

//class構文
class Person{
  constructor(name, mt){
    this.name = name;
    this.mt = mt;
  }
  climb() {
    console.log(`${this.name} is climbing ${this.mt}`); //テンプレートリテラル
  }
}

let kokona = new Person('Kokona', 'Mt.Takao');
kokona.climb();

트랜스파일

'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(name, mt) {
    _classCallCheck(this, Person);

    this.name = name;
    this.mt = mt;
  }

  _createClass(Person, [{
    key: 'climb',
    value: function climb() {
      console.log(this.name + ' is climbing ' + this.mt + '.'); //テンプレートリテラル
    }
  }]);

  return Person;
}();

var kokona = new Person('Kokona', 'Mt.Takao');
kokona.climb();

트랜스파일을 확인해 보기

시험에 적당한 html 파일을 만들어 es2015 대응하지 않는 IE11( htps : // 감가 x. 기주 b. 이오 / 코 mpa t-b ぇ / 에 s6 / )
로 읽어보기

할 수있었습니다

참고