javascriptのES6クラスをインポートおよびエクスポートする方法

Question

私はjavascriptおよびnodejsを初めて使用しています。このプロジェクトを使用して、自分のスキルを開発し、新しいテクノロジーを学びます。現在、私のプロジェクトは互いに依存する複数のクラスを使用しています。クラスファイルは異なるディレクトリにあり、私は現在、クラスを他のファイルで参照できるようにするために、exportとrequireステートメントを使用しようとしています。私は、ブラウザのタグを単純化するために、browserifyとwatchifyを使ってすべてのファイルをまとめてバンドルしています。

は、ここでは次のようにお互いに依存しているクラスがあるプロジェクトのレイアウト（JavaScriptのフォルダ）

-Base (Folder) 
--Game.js (Class) 
--Player.js (Class) 
--Ball.js (Class) 
-Helpers (Folder) 
--Draw.js (Class) 
--Helper.js (Class) 
-GameType (Folder) 
--Game1.js (Class) 

です。

Game is Dependent on 
--Draw.js 
--Helper.js 
Player and Ball are Dependent on 
--Helper.js 
Game1 
--Game.js 
--Ball.js 
--Player.js 

プロジェクトは、app.jsファイルでロードされ、game1ファイルが必要です。現時点では、私はテストして、すべての要求と輸出の声明を働かせようとしています。現在、app.jsファイルでgame1オブジェクトを作成できましたが、変数とメソッドにアクセスできません。私はオブジェクトのログをコンソールにすることができ、正しい変数とメソッドをすべて持っているので、game1オブジェクトを正しく作成していますが、その一部にはアクセスできません。私は現在、ES6クラス表記のためにrequire文とexport文を間違って使用しているのか、自分のコードに別の問題があるのか​​不明です。私はrequireとexport文を正しく使用していますか？

ここには、クラスのスニペットとapp.jsファイルがあります。いくつかのクラスのいくつかのメソッドのいくつかは終了する必要がありますが、私はコードのナビゲーションをより良くするためにrequireとexport機能を追加しようとしています。私はあなたが私の問題に対する解決策を見つけるのを助けてくれることを願っています。

app.js

const Game1 = require('./GameType/game1.js'); 

window.onload = function(){ 
    console.log("Test Started"); 

    console.log(); 

    var canvasLocator = document.querySelector("#gameCanvas"); 
    var canvasContext = canvasLocator.getContext("2d"); 

    var game1 = new Game1(); 

    //Prints out the correct object in the console 
    console.log(game1); 

    game1.draw(); 
    //Returns an empty array of objects 
    //In my test is should return a draw obj 
} 

Game1.js

const Game = require('../Base/Game.js'); 
const Ball = require('../Base/Ball.js'); 
const Player = require('../Base/Player.js'); 

class Game1 extends Game{ 
    constructor(){ 
     super(); 
     this.ball = new Ball(400, 300); 
     this.player1 = new Player("User", 15, 275, "blue"); 
     this.player2 = new Player("AI", 775, 275, "blue"); 
     this.mouseYPos; 
    } 

    refresh(){ 
     //Needs to be implemented 
    } 


    draw(){ 
     console.log("Super Draw: " + this.ball); 
    } 


    moveEverything(){ 
     //Needs to be implemented 
    } 
} 

module.exports = Pong; 

Game.jsがインターフェースとして機能し、また

'use strict'; 

const Helper = require('../Helpers/Helper.js'); 
const Draw = require('../Helpers/Draw.js'); 

class Game{ 
    constructor(){ 
     this.interval; 
     this.started = false; 
     this.framesPerSecond = 30; 
     this.drawObj = new Draw(); 
     this.helper = new Helper(); 
    } 

    //Each game needs to implement 
    draw(){ 
     console.log("draw() not implemented in child class!"); 
    } 

    moveEverything(){ 
     console.log("moveEverything() not implemented in child class!"); 
    } 

    refresh(){ 
     console.log("refresh() not implemented in child class!"); 
    } 
}; 

module.exports = Game 

ボール

すべてのゲームに必要な変数を持っています

const Helper = require('../Helpers/Helper.js') 

class Ball{ 
    constructor(x, y){ 
     this.ballX = x; 
     this.ballY = y; 
     this.ballSpeedX; 
     this.ballSpeedY; 
     this.ballSpeedXChange; 
     this.ballSpeedYChange; 
     this.helper = new Helper(); 
    } 

    move(x,y){ 
     this.ballX = this.ballX + x; 
     this.ballY = this.ballY + y; 
    } 

    increaseSpeed(speedX, speedY){ 
     this.ballSpeedX = this.ballSpeedX + speedX; 
     this.ballSpeedY = this.ballSpeedY + speedY; 
    } 

    reflectBall(player, drawObj){ 

    } 

    reflect(ptOfContact, paddleSpeed){ 

    } 

    setBallDifficulty(difficulty){ 
     switch(difficulty){ 
      case "Easy": 
       this.ballSpeedXChange = -1; 
       this.ballSpeedYChange = 1; 
       break; 
      case "Medium": 
       this.ballSpeedXChange = -1.5; 
       this.ballSpeedYChange = 1.5; 
       break;  
      case "Hard": 
       this.ballSpeedXChange = -2; 
       this.ballSpeedYChange = 2; 
       break; 
      default: 
       console.log("No difficulty Found"); 
     } 
    } 
} 

module.exports = Ball 

プレーヤー

const Helper = require('../Helpers/Helper.js'); 

class Player{ 
    constructor(input, x, y, color){ 
     //Boolean value for AI or Actual Player 
     this.inputType = this.inputType(input); 
     this.playerX = x; 
     this.playerY = y; 
     this.playerSpeed; 
     this.playerScore = 0; 
     this.paddleWidth = 10; 
     this.paddleHeight = 50; 
     this.color = color; 
     this.helper = new Helper(); 
    } 

    move(drawObj){ 
     //True: User Input 
     //False: AI Input 
     if(this.inputType){ 
      this.movePlayerInYDir(drawObj); 
     } 
     else{ 
      this.movePlayerAIInYDir(drawObj); 
     } 
    } 

    movePlayerInYDir(drawObj){ 
     let before = this.playerY; 
     this.playerY = this.helper.playerInput(drawObj); 
     this.playerSpeed = this.playerY - before; 
     if((this.playerY + this.paddleHeight) >= (drawObj.getBaseHeight())){ 
      this.playerY = (drawObj.getBaseHeight() - this.paddleHeight); 
     } 
    } 

    movePlayerAIInYDir(drawObj){ 
     this.playerSpeed = this.setBotDifficulty("Easy"); 
     this.playerY = this.playerY + this.playerSpeed; 
     if(this.playe2Y <= 0){ 
      //Hits Top 
      this.playerSpeed = (this.playerSpeed) * -1; 
     } 
     else if((this.playerY + this.paddleHeight) >= drawObj.getBaseHeight()){ 
      //Hits Bottom 
      this.playerSpeed = (this.playerSpeed) * -1; 
     } 
    } 

    setAIDifficulty(difficulty){ 
     switch(difficulty){ 
      case "Easy": 
       //TODO 
       break; 
      case "Medium": 
       //TODO 
       break; 
      case "Hard": 
       //TODO 
       break; 
      case "Practice": 
       //Unbeatable Mode 
       break; 
      default: 
       console.log("No difficulty Found"); 
     } 
    } 

    //Helper 
    inputType(type){ 
     //True: Real Input 
     //False: AI 
     switch(type){ 
      case "User": 
       return true; 
      case "AI": 
       return false; 
      default: 
       console.log("Type not recognized"); 
     } 
    } 

} 

module.exports = Player 

ヘルパー

class Helper{ 
    constructor(){ 
     this.gameType; 
     this.canvasLocator = document.querySelector("#gameCanvas"); 
     this.canvasContext = this.canvasLocator.getContext("2d"); 
     this.mouseXPos; 
     this.mouseYPos; 
    } 

    getMouseYPos(canvas, evt) { 
     var rect = canvas.getBoundingClientRect(); 
     return (evt.clientY - rect.top); 

    } 

    playerInput(drawObj){ 
     let c = this.canvasLocator; 
     let helper = this; 
     //let game = this; 
     //let mouseYPos; 
     //console.log(game); 
     c.addEventListener("mousemove", function(evt){ 
              helper.mouseYPos = helper.getMouseYPos(c, evt);         
             } 
             , false); 
     //console.log(game.mouseYPos); 
     return helper.mouseYPos;  
    } 

    change(speed){ 
     //Ball Function for reflection 
     if(speed > 8 || speed < -8){ 
      return 2; 
     } 
     return (Math.abs(1/8 * speed) + 1); 
    } 

    randomIntNumber(min, max){ 
     min = Math.ceil(min); 
     max = Math.floor(max); 
     return Math.floor(Math.random() * (max - min)) + min; 
    } 

    randomSpeed(){ 
     if(this.randomIntNumber(0, 100) % 2 == 0){ 
      return this.randomIntNumber(-7, -9); 
     } 
     else{ 
      return this.randomIntNumber(7, 9); 
     } 
    } 

    randomNumber(min, max){ 
     return (Math.random() * (max - min)) + min; 
    } 
} 

module.exports = Helper 

は助けてくれてありがとう。

Answer 1

初心者の方は、ES6でインポートおよびエクスポートする方法を尋ねました。これに取り組む前に、ES6モジュールの構文は、Node.JSがモジュールをインポートする方法と同じではないことに注意することが重要です。あなたの例では、Node.JS Common.jsスタイルモジュールの読み込みを使用しています。 ES6で

そう...

import jquery from 'jquery'; 

か、あなたのnode_modulesフォルダの外に何かをロードしているかのようなモジュールをインポート...

import myClass from './path/to/where/the/file/is'; 

私が提供した2つの例は、ファイル全体を依存関係としてロードする方法です。

ここで、使用する単一の関数をインポートしたければ、ES6でも同様に使用できます。

test.js

const myFunction =() => { alert("hello world") }; 
export { myFunction } 

今、あなたはそう...

import { myFunction } from './path/to/test.js'; 

のようなだけのMyFunctionをインポートすることができ、このすべては、あなたが心に留めておく必要がある一つのことは、ネイティブのブラウザである、と述べましたまだJavaScriptモジュールをインポートする能力がありません。この問題を回避するには、Webpackのようなものを使用して、ES6を使用してモジュールをインポートおよびエクスポートする機能を提供する必要があります。

https://webpack.github.io/