Help us understand the problem. What is going on with this article?

gulp + Babel 導入備忘録

More than 1 year has passed since last update.

gulp + Babel 備忘録

個人的メモとして(情報が古くなっている可能性があるので参考にするときは注意)

gulpインストール

  1. nodeをインストール
  2. 適当にディレクトリを作成
  3. コマンドプロンプトを起動してディレクトリに移動 (cd C:\gulp-test)
  4. C:\gulp-test> npm init
  5. 色々聞かれるので答える(後で変更可能なので分からなかったらEnterで飛ばしてOK)
  6. package.jsonが作られる
  7. gulpをグローバルインストール C:\gulp-test> npm install gulp -g
  8. 右のコマンドでバージョンが出たらOK C:\gulp-test> gulp -v
  9. 8で表示されたバージョンを指定(3.9.1の部分)してローカルにもインストール C:\gulp-test> npm install gulp@3.9.1 --save-dev
  10. 右のコマンドでローカルのgulpのバージョンが表示されたらOK C:\gulp-test> gulp -v

Babelをインストール

  1. ES2015用のpresetをインストール C:\gulp-test> npm install babel-preset-es2015 --save-dev
  2. gulpプラグインのBabelをインストール npm install gulp-babel --save-dev
  3. babel-coreをインストール npm install babel-core --save-dev
  4. ディレクトリ内に.babelrcを作成して以下を記述(ES2015用のプリセットを使うので)
.babelrc
{
  "presets": ["es2015"]
}

gulpfileの編集

  1. ディレクトリ内にgulpfile.jsを作成して以下の設定を記述
  2. 例としてルート直下にes2015フォルダとjsフォルダを作成
gulpfile.js
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ファイル作成

  1. es2015フォルダの中にscript.jsを作成 ES2015で色々書いてみる
/es2015/script.js
//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();

トランスパイルする

  1. Babelを実行 C:\gulp-test> gulp babel
  2. 変換されたファイルがjsフォルダの中にscript.jsとして作られる
/js/script.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(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();

トランスパイルしたのを確認してみる

  1. 試しに適当なhtmlファイルを作ってes2015対応していないIE11(https://kangax.github.io/compat-table/es6/) で読み込んでみる es2015-babel-IE.png できました

ちなみにes2015フォルダの方のscript.jsを読み込むと当然無理
es2015-IE.png

参考

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした