So importieren/exportieren Sie eine Klasse in Vanilla JavaScript (JS)

Question 1

Ich verwende Vanilla JavaScript (JS). Jetzt versuche ich, das Konzept des Imports/Exports zu nutzen Klasse Und Modul die als Teil der Veröffentlichung von ECMA-2015 (ECMA-6) kam.

Bitte sehen Sie sich das folgende Code-Snippet an:

Rechteck.js:

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

myHifiRectangle.js:

import Rectangle from 'rectangle.js';

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

Ich versuche, auf die oben genannten JS-Dateien in einer HTML-Seite mit dem Namen zu verweisen test.html Wie nachfolgend dargestellt:

<!DOCTYPE html>
<html lang = "en">
   <head>
      <meta charset = "UTF-8">
      <title>Javascipt by Rasik Bihari Tiwari</title>
       <script src="https://stackoverflow.com/questions/44490627/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>

Dann habe ich versucht zu laden test.html im Browser. Das Ergebnis ist bei verschiedenen Browsern unterschiedlich.

Bei Google Chrome erhalte ich folgenden Fehler:

Nicht erfasster Syntaxfehler: Unerwarteter Token-Export

Auf Mozilla Firefox bekomme ich folgenden Fehler:

SyntaxError: Exportdeklarationen dürfen nur auf der obersten Ebene eines Moduls erscheinen

SyntaxError: Importdeklarationen dürfen nur auf der obersten Ebene eines Moduls erscheinen

ReferenceError: MyHiFiRectangle ist nicht definiert[Learn More]

Ich habe versucht, die JS-Dateien neu zu ordnen, auf die in der verwiesen wird Kopf -Tag der HTML-Datei, hatte aber keine Auswirkungen.

Notiz: Um es noch einmal klarzustellen, ich verwende keine Transpiler wie Babel. Ich versuche, die native Unterstützung von Export/Import zu überprüfen Klasse Und Modul Konstrukte in Vanilla JS und wie es funktioniert.

Question 2

Ich bin das durchgegangen und habe eine Lösung mit einer dritten js-Datei als Modul.
rectangle.js wird gleich sein und myHifiRectangle.js Datei haben nur eine Änderung.

import Rectangle from './rectangle.js';

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

Jetzt brauchen wir eine dritte Datei, die eine Moduldatei sein wird, sagen wir, script.js

import MyHiFiRectangle from './myHifiRectangle.js'

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

Nun, die dritte Datei, script.js sollte ein Modul sein. Mehr zu Modulen Hier. Ich habe alle drei Dateien unter modelJS Ordner.

<script type="module" src="https://stackoverflow.com/modelJS/script.js"></script>

Wenn Sie jetzt laufen, sollten Sie sehen, dass „bar“ auf der Konsolenregisterkarte des Entwicklertools gedruckt wird.

Question 3

Ich füge auch eine Antwort hinzu, nachdem ich einen Hinweis von der Antwort von curiou.netter in diesem Thread erhalten habe.

Ich werde die Fehler in der genauen Reihenfolge in den Originalcodedateien aufzeigen. Übrigens konnte ich das Problem beheben, ohne zusätzliche einzubeziehen script.js Datei:

Wenn Sie sich auf JS-Module beziehen, sollte der Skripttyp sein Modul stattdessen. Ich bezog mich auf myHiFiRectancle.js wie eine normale JS-Datei mit Quelle taggen als:
```
src="Scripts/myHiFiRectangle.js"
```
Ich habe auch importiert MyHiFiRectangle Modul. Hier ist, wie die Kopf Tag sieht jetzt in der aus test.html Datei nach Behebung dieses Fehlers:
```
<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>
```

Exportvorgabe Aussage fehlte myHiFiRectangle.js Datei. Jede Klasse muss als Modul exportiert werden, wenn sie von einem anderen Ort verwendet werden soll. Die korrigiert myHiFiRectangle.js Datei sieht wie folgt aus:
```
import Rectangle from './rectangle.js';
export default class MyHiFiRectangle extends Rectangle {
  constructor(height, width) {
  super(height,width);
  this.foo= "bar";  
 }
}
```
Meine Skriptdateien hatten einen weiteren Fehler beim Importieren von Modulen.

Falscher Weg:
```
import Rectangle from 'rectangle.js';
import MyHiFiRectangle from '/scripts/myHiFirectangle.js';
```
Es verursacht den folgenden Fehler, der selbsterklärend ist:

Nicht erfasster TypeError: Fehler beim Auflösen des Modulbezeichners „rectangle.js“. Relative Verweise müssen entweder mit „/“, „./“ oder „../“ beginnen.

Der richtige Weg:
```
import Rectangle from './rectangle.js';
import MyHiFiRectangle from './scripts/myHiFirectangle.js';
```

Question 4

Ich möchte Ihnen eine alternative Lösung zu dem zeigen, was @Andy Gaskell gepostet hat.

Erstens benötigen Sie babel, um sicherzustellen, dass Sie ES6 in Ihrem Browser verwenden können. Dadurch soll sichergestellt werden, dass Ihr Code weiterhin funktioniert, da einige Browser (ältere Browser wie IE) moderne Javascript-Funktionen (ES6 und höher) wie Import/Export und Klassen nicht unterstützen.

Sie können das folgende Skript hinzufügen

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

vor allen anderen oben erwähnten Javascript-Dateien.

Zweitens, wenn Sie Ihre Javascript-Klassen inline einschließen, wird der Geltungsbereich dieser Klassen global, selbst wenn sie sich in ihren eigenen physischen js-Dateien befinden.

Ich habe unten ein funktionierendes Beispiel eingefügt, ich habe es ein wenig geändert, damit es im Code-Snippet funktioniert. Sie möchten das Skript durch das Skript ersetzen, das Ihre Javascript-Datei enthält, wie Sie es in Ihrem Code getan haben.

<!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>

AKTUALISIERT

OK. Cool! Übrigens, wenn ich die gesamte Klassendefinition in das Skript-Tag meiner HTML-Seite selbst bringe, muss ich nicht einmal auf babel-core im Head-Tag verweisen. Warum sollte es erforderlich sein?

Sie benötigen es möglicherweise für Browser, die Klassen wie IE nicht unterstützen. Wenn die Kompatibilität mit älteren Browsern jedoch nicht zu Ihren Anforderungen gehört, benötigen Sie sie nicht.

… brauche ich überhaupt das Export-Import-Zeug? Welche Bedeutung hätte der Modulexport in einem nativen Javascript, wenn jede Klasse mehr oder weniger global ist?

In der Tat brauchen Sie das Export-Import-Zeug nicht, da Ihre Klassen global sind. Diese verwenden Sie nur, wenn Sie das Modulsystem nutzen möchten. Wenn Sie Import/Export nicht verwenden, sollten Ihre Klassen global sein und daher funktionieren. Aber für den Fall, dass es irgendwie nicht ging. Sie stellen sicher, dass es global vorhanden ist, indem Sie es wie folgt an ein Fensterobjekt anhängen:

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

Question 5

In die meisten Browser Dies wird über aktiviert Feature-Flag.

Chrom: gehe zu about:flags und aktivieren Sie “Experimentelle Webplattformfunktionen”.

Firefox ab Version 54: dom.moduleScripts.enabled.

Edge 15 oder neuer: Aktivieren Sie „Experimentelle JavaScript-Funktionen“ in about:flags.