☰

Vanilla JavaScript (JS) でクラスをインポート/エクスポートする方法 質問する

tag-icon • tag-icon javascript html ecmascript-6
Vanilla JavaScript (JS) でクラスをインポート/エクスポートする方法 質問する

私はVanilla JavaScript (JS)を使用しています。今、インポート/エクスポートの概念を活用しようとしています。クラスそしてモジュールこれは ECMA-2015 (ECMA-6) リリースの一部として提供されました。

以下のコードスニペットをご覧ください。

長方形.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";  
 }
}

上記のJSファイルをHTMLページで参照しようとしています。テスト.html(コードスニペットを参照):

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

そして、ロードしてみましたテスト.htmlブラウザで。ブラウザによって結果は異なります。

Google Chrome では以下のエラーが発生します:

キャッチされない構文エラー: 予期しないトークンのエクスポート

Mozilla Firefox では以下のエラーが発生します:

構文エラー: エクスポート宣言はモジュールの最上位レベルにのみ出現できます

構文エラー: インポート宣言はモジュールの最上位レベルにのみ出現できます

ReferenceError: MyHiFiRectangle が定義されていません[詳細]

参照されているJSファイルを並べ替えてみました頭HTML ファイルのタグを変更しましたが、影響はありませんでした。

注記：もう一度明確にしておくと、私はBabelのようなトランスパイラは使用していません。エクスポート/インポートのネイティブサポートを確認しようとしています。クラスそしてモジュールVanilla JS の構成要素とその動作について説明します。

ベストアンサー1

私はこれを調べ、3 番目の js ファイルをモジュールとして使用するソリューションを見つけました。rectangle.js同じで、myHifiRectangle.jsファイルには 1 つの変更のみが含まれます。

import Rectangle from './rectangle.js';

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

さて、3つ目のファイル、つまりモジュールファイルが必要です。script.js

import MyHiFiRectangle from './myHifiRectangle.js'

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

さて、3番目のファイルをscript.jsモジュールにする必要があります。モジュールの詳細ここmodelJSフォルダーの下に 3 つのファイルがすべてあります。

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

実行すると、開発者ツールのコンソール タブに「bar」と表示されるはずです。

おすすめ記事