My First ES6 Test Code - Trying Modules without compilers (Export, Import)

With the basic knowledge of Javascript & jQuery, I decided to step in to ES6. What excites me is the Module where I can import & export multiple JS files. Currently its hard to manage when there are lot of functions in one JS file which I used to do using jQuery.

Since all modern browser now supports ES6, I decided not to compile and see how it runs in the browser.

I started with a basic HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Hi</h1>
    <script src="./main.js" type="module"></script>
</body>
</html>

Then I created 3 modules and one main.js to include in my HTML Page.

a.js

import { stuff } from "./b.js";
import { randhex, validURL } from "./c.js";

stuff("It works");

console.log(import.meta); 
console.log(validURL("google.com/")); 
const goolink = validURL("google.com/");

console.log(randhex(5)); 

export { validURL, goolink };

b.js

const stuff = function (text) {
  console.log(text);
};

export { stuff };

c.js

const validURL = function (str) {
  var pattern = new RegExp(
    "^(https?:\\/\\/)?" + // protocol
    "((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|" + // domain name
    "((\\d{1,3}\\.){3}\\d{1,3}))" + // OR ip (v4) address
    "(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*" + // port and path
    "(\\?[;&a-z\\d%_.~+=-]*)?" + // query string
      "(\\#[-a-z\\d_]*)?$",
    "i"
  ); // fragment locator
  return !!pattern.test(str);
};

const randhex = function (len) {
  var maxlen = 8,
    min = Math.pow(16, Math.min(len, maxlen) - 1),
    max = Math.pow(16, Math.min(len, maxlen)) - 1,
    n = Math.floor(Math.random() * (max - min + 1)) + min,
    r = n.toString(16);
  while (r.length < len) {
    r = r + randHex(len - maxlen);
  }
  return r;
};
export { randhex, validURL };

main.js

import { goolink } from "./a.js";

if (goolink) {
  console.log("yaay");
}

Result

Here's what I got in console.log It works and runs in the browser without any issues. No compilers, No Babel, No Webpack nothing. Just pure Javascript.

It works
> Object
true
yaay

What I learned

ES6 Modules will only work on a Server like localhost or web server. It won't work via file:///
While adding <script> tag to HTML, we must add type="module" attribute. Otherwise the module won't work.

Your Suggestions

Do you have any suggestions on how to improve my code? or any other stuff I should be aware of? Let me know in the comments.

My First ES6 Test Code - Trying Modules without compilers (Export, Import)

Comments

More from this blog

Component-based Web Development for Beginners

How to create cross-compatible website shortcut for Mac & Windows

Problems I faced in a Mac as a Windows user (and how to solve them)

Ultimate Email Forwarding Guide + Send Reply

Sync GitHub Fork with Original Repo (not using command or bash)

Result

What I learned

Your Suggestions

Command Palette

Comments

More from this blog

Result

What I learned

Your Suggestions