bebel 6 でES6モジュールを使ってみる

引き続き、ES6でモジュールをやってみる。
まずはソースをバラバラにしてモジュール側を作ってみる。

足し算のモジュール。

src/BPlusA.js

var BPlusA = {
    doCalc(a, b) {
        var result = a + b;
        return result;
    }
};

export default BPlusA;

submitのモジュール。

src/OneForm.js

var OneForm = {
    handleClick(form, mode) {
        this.setMode(mode);
        this.doSubmit(form);
    },
    setMode(mode) {
        if (mode == 'confirm') {
            $('input[name=mode]').val('confirm');
        }
    },
    doSubmit(form) {
        form.submit();
    }
};

export default OneForm;

それらを読み込むメインのjs。

src/main.js

import BPlusA from './BPlusA';
import OneForm from './OneForm';

console.log(BPlusA.doCalc(1, 2));

$(function() {
    $('#member-form .submit-btn').on('click', function(){
        OneForm.handleClick(this.form, 'confirm');
    });
    $('#member-confirm .submit-btn').on('click', function(){
        OneForm.handleClick(this.form, '');
    });
});

んで、まず、babelにプラグイン設定をする。

npm install babel-plugin-transform-es2015-modules-commonjs --save-dev

うーん、あと.babelrcに追記。

.babelrc

{
  "presets": ["es2015"],
  "plugins": ["transform-es2015-modules-commonjs"]
}

で、一応srcからlibに生成する感じで、

babel src --out-dir lib

src以下の３つのファイルがそれぞれlibに下に生成される。

src/BPlusA.js -> lib/BPlusA.js
src/OneForm.js -> lib/OneForm.js
src/main.js -> lib/main.js

で、browserifyにbabelifyを入れる。

npm install --save-dev babelify

今package.jsonはこんな感じよ。

package.json

{
  "devDependencies": {
    "babel-plugin-transform-es2015-modules-commonjs": "^6.3.16",
    "babel-preset-es2015": "^6.3.13",
    "babelify": "^7.2.0",
    "qunitjs": "^1.20.0"
  }
}

で、実行。

browserify lib/main.js -o bundle.js -t

こうして出来たbundle.jsをブラウザから読み込めば良い。

form.php

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="../bundle.js"></script>

gruntかgulpがないとやってられないが、まあ、ファイルを分けられるので見通しよくなっていいんじゃないだろうか。