yilmazdurmaz/#JS-Modules-in-HTML-and-Nodejs

## #JS-Modules-in-HTML-and-Nodejs
#JS-Modules-in-HTML-and-Nodejs

## README.md

      
    Raw
  

              README.md
            
          
    Writing modern Javascript code for both HTML (or Web) and Node.js (or Stand-alone)

When writing for both, 3 things are important:

using type="module" in the HTML file
using "type": "module" in the package.json file (for Node.js)
and every import statement uses .js extension

typeof feature != "undefined" is used to check if a feature is available. Else, another method is used; for example console.log for alert.

files used:

index.html - for Web
index.js - entry point for both
package.json - for Node.js
main.js - not needed, extra layer
module.js - example module layer


to run with Node.js, just run node index.js

  
## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test JS module import</title>
</head>
<body>
    <script src="main.js" type="module"></script>
    <script src="module.js" type="module"></script>
    <script src="index.js" type="module"></script>
</body>
</html>

## index.js
import main from "./main.js";
main();

## main.js
import hello from "./module.js";
let main = () => {
  hello();
};
export default main;

## module.js
let hello = () => {
  if (typeof alert != "undefined") {
    alert("hello world");
  } else {
    console.log("hello world");
  }
};
export default hello;

## package.json
{"type": "module"}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Test JS module import</title>
	</head>
	<body>
	<script src="main.js" type="module"></script>
	<script src="module.js" type="module"></script>
	<script src="index.js" type="module"></script>
	</body>
	</html>
	import hello from "./module.js";
	let main = () => {
	hello();
	};
	export default main;
	let hello = () => {
	if (typeof alert != "undefined") {
	alert("hello world");
	} else {
	console.log("hello world");
	}
	};
	export default hello;