Memo: ES6 Module 

This is just a memo for using ES6 Module.

## Use `default` in export side
```html:index.html
<html>
  <head></head>
  <body>

    <button id="clear">Clear</button>
    <script type="module">
     import Foo from './foo.js';

     const foo = new Foo();
     foo.init();
     document.querySelector('#clear').addEventListener('mousedown', _ => {
         foo.clearFoo();
     }, false);
    </script>

  </body>
</html>
```

```javascript:foo.js
export default class Foo {
    consetructor() {}
    init() {
        console.log('init foo');
    }
    clearFoo() {
        console.log('clear foo');
    }
}
```
## More than one exports in module
### classes🍺
```html:index.html
<html>
  <head></head>
  <body>

    <button id="draft">DRAFT</button>
    <button id="ipa">IPA</button>

    <script type="module">
     import * as TAP from './bar.js';

     // for Draft in module bar.js
     const df = new TAP.Draft();
     df.init();
     document.querySelector('#draft').addEventListener('mousedown', _ => {
         df.drinkDraft();
     }, false);

     // for IPA in module bar.js
     const ipa = new TAP.IPA();
     ipa.init();
     document.querySelector('#ipa').addEventListener('mousedown', _ => {
         ipa.drinkIPA();
     }, false);
</script>

  </body>
</html>
```

```javascript:bar.js
export class Draft {
    consetructor() {}
    init() {
        console.log('init Draft');
    }
    drinkDraft() {
        console.log('dring Draft');
    }
}

export class IPA {
    consetructor() {}
    init() {
	console.log('init IPA');
    }
    drinkIPA() {
	console.log('drink IPA');
    }
}
```

### class and function mixed in module🍷
```html:index.html
<html>
  <head></head>
  <body>

    <button id="cab">Cab</button>
    <button id="zin">Zin</button>

    <script type="module">
     import * as Red from './red.js';

     const cab = new Red.Cab();
     cab.init();
     document.querySelector('#cab').addEventListener('mousedown', _ => {
         cab.drinkCab();
     }, false);
     document.querySelector('#zin').addEventListener('mousedown', _ => {
         let idx = Red.Zin(Red.farm.length);
         console.log('Get Zin at ' + Red.farm[idx]);
     }, false);
    </script>

  </body>
</html>
```
```javascript:red.js
export class Cab {
    consetructor() {}
    init() {
        console.log('init cab');
    }
    drinkCab() {
        console.log('drink cab');
    }
}

export const Zin = year => {
    let i = parseInt(100 * Math.random()) % 4;
    return i;
};

export const farm = [
    'Napa', 'Sonoma', 'Santa Cruz', 'Livermore'
];
```
### Import each class and function🥂
```html:index.html
<html>
  <head></head>
  <body>

    <button id="mel">Mel</button>
    <button id="musc">Musc</button>

    <script type="module">
     import {Merlot as Mer} from './white.js';
     import {Muscat as mus} from './white.js';

     const mer = new Mer();
     mer.init();
     document.querySelector('#mel').addEventListener('mousedown', _ => {
         mer.drinkMerlot();
     }, false);
     document.querySelector('#musc').addEventListener('mousedown', _ => {
         console.log('Muscat might be ' + mus());
     }, false);
    </script>

  </body>
</html>
```

```javascript:white.html
export class Merlot {
    constructor() {}
    init() {
        console.log('init Merlot');
    }
    drinkMerlot() {
        console.log('dring Merlot');
    }
}

export const Muscat = () => {
    return 'sweet';
};
```