Eotones/fooModule.js

## fooModule.js
export default class fooModule {
  constructor(){
    //..
  }

  doSomeThing(){
    console.log("doSomeThing");
  }
}

## index.htm
<!DOCTYPE HTML>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="theme-color" content="#744555">

    <title>Title</title>

    <link rel="stylesheet" type="text/css" media="all" href="./style.css">
</head>
<body>
    <div class="container">
        <h1>Title</h1>
        <p>...</p>
    </div>

    <script type="module" src="./main.js"></script>
</body>
</html>

## main.js
import fooModule from './libs/fooModule.js';

const main = {
    init: function(){
        console.log('[init]');

        let foo = new fooModule();
        foo.doSomeThing();
    }
};

(function(){
    main.init();
})();

## style.css
@charset "UTF-8";

:root {
    --font-serif: "PMingLiU", Georgia, serif;
    --font-sans-serif: "Microsoft JhengHei", "Microsoft YaHei", 'LiHei Pro', Arial, Helvetica, sans-serif;
    --font-monospace: "Courier New", Courier, monospace;
}

* {
	font-family: var(--font-serif);
	box-sizing: border-box;
}

html {}

body {}

h1,h2,h3,h4,h5,h6,strong {
    font-family: var(--font-sans-serif);
    font-weight: bold;
}

pre,code {
    font-family: var(--font-monospace);
}

a,a:link { color: #5E8C88; text-decoration: none; }
a:visited { color: #5E8C88; text-decoration: none; }
a:hover { color: #97D74A; text-decoration: underline; }
a:active { color: #FF3333; }
	export default class fooModule {
	constructor(){
	//..
	}

	doSomeThing(){
	console.log("doSomeThing");
	}
	}
	<!DOCTYPE HTML>
	<html lang="zh-TW">
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="theme-color" content="#744555">

	<title>Title</title>

	<link rel="stylesheet" type="text/css" media="all" href="./style.css">
	</head>
	<body>
	<div class="container">
	<h1>Title</h1>
	<p>...</p>
	</div>

	<script type="module" src="./main.js"></script>
	</body>
	</html>
	import fooModule from './libs/fooModule.js';

	const main = {
	init: function(){
	console.log('[init]');

	let foo = new fooModule();
	foo.doSomeThing();
	}
	};

	(function(){
	main.init();
	})();
	@charset "UTF-8";

	:root {
	--font-serif: "PMingLiU", Georgia, serif;
	--font-sans-serif: "Microsoft JhengHei", "Microsoft YaHei", 'LiHei Pro', Arial, Helvetica, sans-serif;
	--font-monospace: "Courier New", Courier, monospace;
	}

	* {
	font-family: var(--font-serif);
	box-sizing: border-box;
	}

	html {}

	body {}

	h1,h2,h3,h4,h5,h6,strong {
	font-family: var(--font-sans-serif);
	font-weight: bold;
	}

	pre,code {
	font-family: var(--font-monospace);
	}

	a,a:link { color: #5E8C88; text-decoration: none; }
	a:visited { color: #5E8C88; text-decoration: none; }
	a:hover { color: #97D74A; text-decoration: underline; }
	a:active { color: #FF3333; }