$ npm i -g babel

$ babel script.js --out-file script-compiled.js

$ npm i -g browserify

$ browserify script.js -t babelify --outfile bundle.js

$ npm i --save gulp gulp-load-plugins gulp-util gulp-notify gulp-if gulp-sourcemaps gulp-uglify
$ npm i --save browserify watchify babelify vinyl-source-stream vinyl-buffer 

var gulp = require( 'gulp' );
var $    = require( 'gulp-load-plugins' )();

/**
 * JavaScript の依存関係を解決し、単一ファイルにコンパイルします。
 * このタスクは開発用で、JavaScript は Minify されません。
 * Minify するとデバッガで Source Maps を展開したとき、変数名を復元できず不便なので開発時はそのまま結合します。
 *
 * @return {Object} ストリーム。
 */
gulp.task( 'js', function() {
    return compile( false );
} );

/**
 * JavaScript の依存関係を解決し、単一ファイルにコンパイルします。
 * このタスクはリリース用で、JavaScript は Minify されます。
 *
 * @return {Object} ストリーム。
 */
gulp.task( 'js-release', function() {
    return compile( true );
} );

/**
 * JavaScript の変更を監視して差分コンパイルします。
 *
 * @return {Object} ストリーム。
 */
gulp.task( 'watchify', function() {
    return compile( false, true );
} );

/**
 * JavaScript の依存関係を解決し、単一ファイルにコンパイルします。
 *
 * @param {Boolean} isMinify 圧縮を有効にする場合は true。
 * @param {Boolean} isWatch  差分監視モードで実行する場合は true。
 *
 * @return {Object} ストリーム。
 */
function compile( isUglify, isWatch ) {
    var src        = './src/js/app.js';
    var dest       = './dest/js';
    var bundlejs   = 'bundle.js';
    var browserify = require( 'browserify' );
    var source     = require( 'vinyl-source-stream' );
    var buffer     = require( 'vinyl-buffer' );
    var watchify   = require( 'watchify' );
    var logger     = new bundleLogger( src, bundlejs );
    var option     = {
        basedir:   './',
        debug:     true,
        transform: [ 'babelify' ]
    };

    var bundler = null;
    if( isWatch ) {
        option.cache        = {};
        option.packageCache = {};
        option.fullPaths    = true;

        bundler = watchify( browserify( src, option ) );
        logger.watch();

    } else {
        bundler = browserify( src, option );
    }

    /**
     * Browserify による JavaScript コンパイルを実行します。
     *
     * @return {Object} ストリーム。
     */
    function bundle() {
        logger.begin();
        return bundler
            .bundle()
            .on( 'error', handleError )
            .pipe( source( bundlejs ) )
            .pipe( buffer() )
            .pipe( $.sourcemaps.init( { loadMaps: true } ) )
            .pipe( $.if( isUglify, $.uglify() ) )
            .pipe( $.sourcemaps.write( '.' ) )
            .on( 'end', logger.end )
            .pipe( gulp.dest( dest ) );
    }

    bundler.on( 'update', bundle );

    return bundle();
}

/**
 * Browserify による JavaScript コンパイルの進捗をコンソールに出力します。
 *
 * @param {String} src    コンパイルの起点となるファイル。
 * @param {String} bundle コンパイル結果となるファイル。
 */
var bundleLogger = function( src, bundle ) {
    var prettyHrtime = require( 'pretty-hrtime' );
    var beginTime;

    this.begin = function() {
        beginTime = process.hrtime();
        $.util.log( 'Bundling', $.util.colors.green( src ) + '...' );
    };

    this.watch = function() {
        $.util.log( 'Watching files required by', $.util.colors.yellow( src ) );
    };

    this.end = function() {
        var taskTime   = process.hrtime( beginTime );
        var prettyTime = prettyHrtime( taskTime );
        $.util.log( 'Bundled', $.util.colors.green( bundle ), 'in', $.util.colors.magenta( prettyTime ) );
    };
};

/**
 * Browserify のエラーが発生した時、タスク実行を維持するための関数です。
 * エラーを検知して通知します。
 */
function handleError() {
    var notify = require( 'gulp-notify' );
    var args   = Array.prototype.slice.call( arguments );

    notify
        .onError( {
            title: 'Task Error',
            message: "<%= error %>"
        } )
        .apply( this, args );

    // タスク維持
    this.emit( 'end' );
}

var AudioPlayer = function() {
    var _audioContext = ( () => {
        var audioContext = ( window.AudioContext || window.webkitAudioContext );
        if( audioContext ) { return new audioContext(); }

        throw new Error( 'Web Audio API is not supported.' );
    } )();

    var _gainNode = _audioContext.createGain();

    // ... 実装
};

class AudioPlayer {
    constructor() {
        this._audioContext = ( () => {
            let audioContext = ( window.AudioContext || window.webkitAudioContext );
            if( audioContext ) { return new audioContext(); }

            throw new Error( 'Web Audio API is not supported.' );
        } )();

        this._gainNode = this._audioContext.createGain();
    }

    // ... 実装
}

var AudioPlayer = function() {
};

module.exports = AudioPlayer;

var AudioPlayer = require( './AudioPlayer.js' );

export default class AudioPlayer {
}

import AudioPlayer from './AudioPlayer.js';

import {PlayState} from '../model/constants/AudioPlayerConstants.js';

var MainViewModel = React.createClass( {
    getInitialState: function() {
        return {
            musics:  [],
            current: null,
        };
    },

    render: function() {
        return (
            <div>
                <ToolbarViewModel />
                <MusicListViewModel musics={this.state.musics} />
            </div>
        );
    }
} );

module.exports = MainViewModel;

export default class MainViewModel extends React.Component {
    constructor( props ) {
        super( props );
        this.state = {
            musics:  [],
            current: null,
        };
    }

    render() {
        return (
            <div>
                <ToolbarViewModel />
                <MusicListViewModel musics={this.state.musics} />
            </div>
        );
    }
}

// Store 単位のデータ
var _audioPlayer = new AudioPlayer();

// Action に応じて呼ばれる関数
function play( music ) {
    _audioPlayer.play();
    AudioPlayerStore.emitChange();
}

// Action からのリクエスト処理
AppDispatcher.register( function( action ) {
    switch( action.type ) {
    case ActionTypes.PLAY:
        play( action.music );
        breakl
    }
} );

// Store 実装 ( npm object-assign で Mixin している )
var AudioPlayerStore = assign( {}, EventEmitter.prototype, {
    // 更新通知やデータ取得などの実装
} );

module.exports = AudioPlayerStore;

const SINGLETON_PROP     = Symbol();
const SINGLETON_ENFORCER = Symbol();

class AudioPlayerStore extends EventEmitter {
    constructor( enforcer ) {
        // AudioPlayerStore.instance 以外でインスタンス生成したら例外発生
        if( enforcer != SINGLETON_ENFORCER ) {
            throw new Error( 'Cannot construct singleton' );
        }

        // 自身のメソッドで Action からのリクエスト処理
        AppDispatcher.register( this._onAction.bind( this ) );

        // 自身のプロパティとしてデータ管理
        this._audioPlayer = new AudioPlayer();
    }

    // 唯一の AudioPlayerStore インスタンスを返す
    static get instance() {
        if( !( this[ SINGLETON_PROP ] ) ) {
            this[ SINGLETON_PROP ] = new AudioPlayerStore( SINGLETON_ENFORCER );
        }

        return this[ SINGLETON_PROP ];
    }

    _onAction( action ) {
        switch( action.type ) {
        case ActionTypes.PLAY:
            this._play( action.music );
            break;
        }
    }

    _play( music ) {
        this._audioPlayer.play();
        this._emitChange();
    }

    // 更新通知やデータ取得などの実装
}

// クラスの代りにシングルトン インスタンスを公開
export default AudioPlayerStore.instance;