All geek questions in one place

How to import / export a class in vanilla JavaScript

I use simple javascript and try to use the concept of importing and exporting classes and modules, which was part of the ECMA-6 release.

Here is my code:

rectangle.js file -

 export default class Rectangle{ constructor(height, width) { this.height = height; this.width = width; } }

myHifiRectangle.js file -

 import Rectangle from 'rectangle.js'; class MyHiFiRectangle extends Rectangle { constructor(height, width) { super(height,width); this.foo= "bar"; } }

I am trying to use the two aforementioned * .js files in a simple test.html HTML page as shown below:

 <!DOCTYPE html> <html lang = "en"> <head> <meta charset = "UTF-8"> <title>Javascipt by Rasik Bihari Tiwari</title> <script src="Scripts/rectangle.js"></script> <script src="Scripts/myHiFiRectangle.js"></script> <script type="text/javascript"> var v = new MyHiFiRectangle(2,4); console.debug(v.foo); </script> </head> <body > </body> </html>

Now, when I view the test.html file in different browsers, in Google Chrome I get the error below:

Uncaught SyntaxError: Unexpected Token Export

On Mozilla Firefox, I get the error below:

SyntaxError: export declarations can appear only at the top level of the module

SyntaxError: import declarations can appear only at the top level of the module

ReferenceError: MyHiFiRectangle undefined [Learn More]

I tried to reorder the * .js files that are mentioned in the head tag of the HTML file, but they do not matter.

PS I do not use any transporters such as Babel. I am just trying to see how the native 'class' support and the module export / import construct (ECMA-6 version) work in javascript and how it works.

+5
source share
4 answers

I went through this and I have a solution with a third JS file as a module. rectangle.js will be the same, and myHifiRectangle.js will 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 modular file, 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 become a module. More about modules here . I have all three files in the modelJS folder.

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

Now that you run, you should see a 'bar' in the console.

+1
source

I would like to show you an alternative solution posted by @Andy Gaskell.

First, you need babel to be sure you can use ES6 in your browser. This is necessary so that your code still works, as some browsers (such as IE) do not support modern javascript functions (ES6 and higher), 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 in a series, the scope of these classes becomes global, even if they are in your physical js files.

I included the working example below, I modified it a bit to make it work in the code snippet. You want to replace the script with a script that contains your javascript file, as you did 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 definitions to a script tag of my html page itself, then I don’t even need to refer to babel-core in the header. Why is this required?

This may be needed for browsers that do not support classes such as IE. But if the compatibility for older browsers does not meet your requirements, you do not need it.

... do I even need materials for export-import? What would be the value of exporting a module to native javascript when each class is more or less global?

Indeed, you will not need export-import elements, since your classes are global. You only use this if you want to use the module system. If you are not using import / export, your classes should be global and therefore should work. But in case this is not so. You will verify that it exists globally by binding it to the window object as follows:

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

In most browsers, this is enabled through the function flag .

Chrome: Go to about:flags and enable the Experimental Web Platform features.

Firefox starting at version 54: dom.moduleScripts.enabled .

Edge 15 or later: Turn on JavaScript Experimental Functions in about:flags .

+1
source

I add the answer for completeness after receiving a hint from the answer @ curiou.netter. I simply point out the exact errors sequentially in my source code files. I was able to achieve this without having an additional script.js file:

  1. when accessing JS modules, our script type should be module . I meant myHiFiRectancle.js as a regular JS file using the src tag, like src="Scripts/myHiFiRectangle.js" . I also imported the MyHiFiRectangle module. This is how the head tag looks in my test.html file after fixing this error:

     <head> <meta charset = "UTF-8"> <title>Javascipt by Rasik Bihari Tiwari</title> <script type="module"> import MyHiFiRectangle from './scripts/myHiFirectangle.js'; var v = new MyHiFiRectangle(2,4); console.debug(v.foo); </script> </head>

  2. myHiFiRectangle.js file myHiFiRectangle.js not myHiFiRectangle.js export default instructions. Each class must be exported as a module in order to become useful. The file myHiFiRectangle.js looks like this after fixing this error:

     import Rectangle from './rectangle.js'; export default class MyHiFiRectangle extends Rectangle { constructor(height, width) { super(height,width); this.foo= "bar"; } }

  3. My script files had another error in the way I referenced the modules.

    Wrong way:

     import Rectangle from 'rectangle.js'; import MyHiFiRectangle from '/scripts/myHiFirectangle.js';

    This causes an error below that speaks for itself:

    Uncaught TypeError: Failed to resolve module specifier "rectangle.js". Relative links must begin with "/", "./" or "../".

    The right way:

     import Rectangle from './rectangle.js'; import MyHiFiRectangle from './scripts/myHiFirectangle.js';
0
source

Source: https://habr.com/ru/post/1268758/

More articles:


All Articles