Babelの覚書 | ワクガンス

BabelでES6をES5に変換してみる | gulp-babel 8

2018年12月の時点ではBabelのバージョンは8。
Babelはバージョンによって設定方法が大きく異なるので注意する。

手順

1. まずはcd コマンドで、カレントディレクトリをタスクランナーに関するパッケージをインストールする場所に移動する。
2. 「npm init」コマンドでpackage.jsonを作成する。
   

   $ npm init

3. gulpをインストールする。

   $ npm install --save-dev gulp

4. gulpfile.jsを作成する。

   $ touch gulpfile.js

5. Babelをインストールする。

   $ npm install --save-dev gulp-babel

   2018年12月の時点ではBabelのバージョンは8。
6. Babelのコアをインストールする。

   npm install --save-dev @babel/core @babel/preset-env

   Babelバージョン8のときに必要になると思われるパッケージ。下位バージョンとは方法が異なる。
   
7. gulpfile.jsに記述。

   
   var gulp = require('gulp');
   var babel = require('gulp-babel');
   
   gulp.task('test1', function () {
   	gulp.src('../test1.js')
   	.pipe(babel({
   		presets: ['@babel/env']
   	}))
   	.pipe(gulp.dest('../dist'));
   });
   			

   他のBabelバージョンとは記述方法が異なるので注意。
8. gulpを実行してtest1.jsをES6からES5に変換する。

   $ gulp test1

9. 実行前 test1.js

   $(() => {
   	var bigCat = new BigCat();
   	bigCat.bark();
   });
   
   class BigCat{
   	bark(){
   		const bark_str = 'ギョーム';
   		$('#res').html(bark_str);
   	}
   }
   

   
   実行後 dist/test1.js

   "use strict";
   
   function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a 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); } }
   
   function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
   
   $(function () {
     var bigCat = new BigCat();
     bigCat.bark();
   });
   
   var BigCat =
   /*#__PURE__*/
   function () {
     function BigCat() {
       _classCallCheck(this, BigCat);
     }
   
     _createClass(BigCat, [{
       key: "bark",
       value: function bark() {
         var bark_str = 'ギョーム';
         $('#res').html(bark_str);
       }
     }]);
   
     return BigCat;
   }();
   

2018-12-21

ES6→ES5, 一つにまとめる, JSコード圧縮

インストール

$ npm install --save-dev gulp-babel gulp-concat gulp-uglify

gulpfile.js

var gulp = require('gulp');
var babel = require('gulp-babel');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');

gulp.task('test1', function () {
	gulp.src('../*.js')
	.pipe(concat('one.js'))
	.pipe(babel({
		presets: ['@babel/env']
	}))
	.pipe(uglify())
	.pipe(gulp.dest('../dist'));
});
	

2018-12-21

xxx