rollup.jsでレガシィjQueryコードを今すぐes6化しよう

長年フロントエンド開発をしましたが、昔 jQuery, Backbone, Handlebars などで開発したプロジェクトを今の時代に管理することは難しいことでした。es6とnpmで改善しようと思っていろいろ探してみて、rollup.jsとbubleを発見しました。

rollup.jsはまさにjavascriptの未来であるimportを今の段階でサポートするライブラリで、bubleはbabelのようなライブラリです。webpackやbabelなどの複雑でいろんな機能を持ってるライブラリもありますが、rollup.jsとbubleだけで十分使えました。そして、その変換結果の綺麗さは見事です。

rollup.jsの設定の為にgithubにboilerplateをアップしました。設定には５分もかかりませんし、コードを書く必要も一切ありません。ただ設置するだけです。

2018.07.12

rollupの設定を最新にアップデートしました。IE11だけのサポートにして、postcss(css grid)を導入しました。scriptもie11用とそれ以外を分離しました。

設定に問題が2つありました。
babel7がrollup-plugin-babelと合わなくて、babel6に設定しました。これは後で修正します。
VS Codeのprettierが.babelrcを勝手に壊すバグがあり、リンクの情報で修正しました。

git clone https://github.com/fri13th/rollup-jquery-boilerplate your-project
cd your-project
yarn

startコマンドでsrc/のjavascriptとcssファイルがdist/に変換されます。browsersyncで変換された結果がする確認でします。

yarn start

buildでminifiedされたファイルが生成されます。

yarn build

これで環境設定は完了です。

実際の変換はこのような感じです。

src/js/main.js

import $ from 'jquery';
import {view} from 'template';
import {cube} from 'utils';

let array = [1, 2, 3];

console.log(cube(3));
$(() => console.log(view('World', array)));

src/js/template.js

export function view(who, array) {
  return `
Hello, ${who}!
${array.map(no => `${no}`).join('')}
`;
}

src/js/utils.js

export function square ( x ) {
  return x * x;
}

// This function gets included
export function cube ( x ) {
  return x * x * x;
}

buildコマンドで無駄のない綺麗なコードに変換されます。

dist/js/main.iife.js

(function () {
  'use strict';

  function view(who, array) {
    return '\nHello, ' + who + '!\n' + array.map(function (no) {
      return '' + no;
    }).join('') + '\n';
  }

  // This function gets included
  function cube(x) {
    return x * x * x;
  }

  var array = [1, 2, 3];

  console.log(cube(3));
  $(function () {
    return console.log(view('World', array));
  });

}());
//# sourceMappingURL=main.iife.js.map

dist/js/main.es.js

function view(who, array) {
  return `
Hello, ${who}!
${array.map(no => `${no}`).join('')}
`;
}

// This function gets included
function cube ( x ) {
  return x * x * x;
}

let array = [1, 2, 3];

console.log(cube(3));
$(() => console.log(view('World', array)));
//# sourceMappingURL=main.es.js.map

es5を直接書くより何倍も効率よく作業が出来ます。機能がファイル単位で分散されて見やすくて管理しやすいし、templateもサポートするのでHandlebarsなどの必要性も低くなります。es6の標準コードなので、将来的に仕様変更の可能性もありません。

変換作業もまず既存のes5コードをそのままsrc/main.jsにコピーして、それからちょっとずつリファクタリングすればいいし、結果コードがIE8などでもそのまま使えるので、今すぐes6開発が可能になります。

今回作業して感じたのはJavascriptの未来は思ったより近いとこまで来てるってことです。今すぐes6開発に挑戦しましょう！