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">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./main.js" type="module"></script>

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


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

stuff("It works");

const goolink = validURL("");


export { validURL, goolink };


const stuff = function (text) {

export { stuff };


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
  ); // 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 };


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

if (goolink) {


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

What I learned

  1. ES6 Modules will only work on a Server like localhost or web server. It won't work via file:///
  2. 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.

Did you find this article valuable?

Support Surjith S M by becoming a sponsor. Any amount is appreciated!