lebabを利用して既存のjsファイルをes6化する。

概要

既存のjavascriptで書かれたファイルをEcmaScript6の書き方にフォーマットをする時に便利なnpm moduleの紹介。

lebab

オプションで引数で有効化する機能を選択できる。同様にdisableも可能。defaultでは全てが有効化されている状態で実行されるのでオプションで指定するのがベター。以下の例はvarconstやを変換するオプションを渡している。

npm install -g lebab
lebab es5.js -o es6.js --enable let

難点としては1ファイル毎でしか変換するファイルを指定できない。できればディレクトリ等を指定してその配下の*.jsを全て変換して欲しい。オプションで--recursiveがあればよかったのに。ということで、ディレクトリを指定するとその配下のjavascriptファイルを全て変換してくれるスクリプトを書いた。

環境

  • MacOS El Capitan
  • nodejs v5.0.0
  • その他必要node_modulesをnpm install済み
  • -hermonyオプションをつけてスクリプトを実行

es6.js

'use strict';

const _ = require('lodash');
const commander = require('commander');
const execSync = require('child_process').execSync;
const fs = require('fs');
const path = require('path');

// lebabの公式のオプション
const masterOption = {
  'let': true,
  'arrow': true,
  'obj-shorthand':true,
  'arg-spread': true,
  'obj-method': true,
  'no-strict': true,
  'commonjs': true
};

const list = val => {
  return _.filter(val.split(','), (v) => {
    return masterOption[v] ;
  }).join(',');
};

const program = commander.version('0.0.1')
  .option('-d, --directory [directory]', 'readdirSync directory name')
  .option('-o, --option <items>', 'enable es6 features', list)
  .parse(process.argv);

// ディレクトリが指定されていない場合
if (_.isUndefined(program.directory)) {
   console.error('ディレクトリが未指定です');
   process.exit(1);
}
// オプションを指定する デフォルトはletのみ
const option = program.option || 'let';

try {
  // ディレクトリ配下のファイルを全て見ていく
  _.forEach(fs.readdirSync(program.directory), filename => {
    // jsファイルでない場合は処理をスキップ
    if (path.extname(filename) !== '.js') {
      return;
    }
    const filePath = `${program.directory}\/${filename}`;

    console.log(`execute: lebab ${filePath} -o ${filePath} --enable ${option}`);
    execSync(`lebab ${filePath} -o ${filePath} --enable ${option}`);
  });
} catch(err) {
  console.error('変換中に問題が発生しました');
  process.exit(1);
}

実行例

適応前

'use strict';

var _ = require('lodash');

var hoge = function(data){

  var id = data.id;
  var name = data.name;
  return {
    id: id,
    name: name
  };
};

exports.book = function(data){
  return _.values(data.book);
};

exports.hoge = hoge;

ほげディレクトリに上のjsファイルを格納した以下のシェルを実行します。 shell

sudo node -harmony es6.js -d ~/Desktop/hoge/ -o let,arrow,obj-shorthand

適応後

'use strict';

const _ = require('lodash');

const hoge = (data) => {

  const id = data.id;
  const name = data.name;
  return {
    id,
    name
  };
};

exports.book = (data) => _.values(data.book);
exports.hoge = hoge;

JavaScript 第6版

JavaScript 第6版

パーフェクトJavaScript (PERFECT SERIES 4)

パーフェクトJavaScript (PERFECT SERIES 4)