How to do import/export a class in Vanilla JavaScript (JS)

I'd like to show you an alternative solution to what @Andy Gaskell has posted.

Firstly, you need babel in order to be sure that you can use ES6 in your browser. This is to ensure that your code will still work as some browsers (legacy ones like IE) does not support modern javascript (ES6 and beyond) features such as import/export and classes.

You can add the following script

`<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>`

before any other javascript files mentioned above.

Secondly, if you include your javascript classes inline, the scope of those classes become global, even if they reside in their own physical js files.

I've included working example below, I've changed it a little bit so that it would work in the code snippet. You want to replace the script with the script that contains your javascript file like you have done in your code.

<!DOCTYPE html>
<html lang = "en">
   <head>
      <meta charset = "UTF-8">
      <title>Javascipt by Rasik Bihari Tiwari</title>
       <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>

      <!-- Replace them with script with src pointing to your javascript -->       
      <script type="text/javascript"> 
        class  Rectangle{
          constructor(height, width) {
            this.height = height;
            this.width = width;
          }
        }

        class MyHiFiRectangle extends Rectangle {
          constructor(height, width) {
              super(height,width);
              this.foo= "bar";  
         }
        }
           
       var v = new MyHiFiRectangle(2,4);
       console.log(v.foo);
       </script>
   </head>
   <body >

   </body>

</html>

UPDATED

ok. cool! Btw, if I bring all the class definition into the script tag of my html page itself then I don't even need to reference babel-core in the head tag. Why would it be required?

You might need it for browsers that does not support classes like IE. But, if compatibility for legacy browsers are not in your requirement, then you don't need it.

...do I even need the export-import stuff? What would be the significance of module export in a native javascript when every class is more or less global?

Indeed you won't need the export-import stuff since your classes are global. You only use this if you want to use the module system. If you don't use import/export your classes should be global and therefore should work. But in case that it didn't somehow. You make sure that it exists globally by attaching it to window object like so:

 window.myClass = class MyClass { /* Class definition */ }

I went through this and I've a solution with a third js file as module. rectangle.js will be same and myHifiRectangle.js file have only one modification.

import Rectangle from './rectangle.js';

export default class MyHiFiRectangle extends Rectangle {
      constructor(height, width) {
      super(height,width);
      this.foo= "bar";  
   }
}

Now, we need a third file which will be a module file, let say, script.js

import MyHiFiRectangle from './myHifiRectangle.js'

var v = new MyHiFiRectangle(2,4);
console.log(v.foo);

Now, the third file, script.js should be made a module. More on modules here. I have all three files under modelJS folder.

<script type="module" src="/modelJS/script.js"></script>

Now, when you run, you should see 'bar' getting printed in the developer tool's console tab.

Tags:

Javascript

Html

Ecmascript 6

Recent Posts