title: How to import and export javascript ES6 classes
body: <p>I am new to javascript and nodejs and I'm using this project to develop my skill and learn the new technologies. Currently my project uses multiple classes that depend on one another. The class files are in different directories and I am currently trying to use export and require statements to allow classes to be referenced in other files. I am also using browserify and watchify to bundle all the files together, to simplify the html script tag.</p>
  
  <p>Here's Project Layout (JavaScript Folder)</p>
  
  <pre><code>-Base (Folder)
   --Game.js (Class)
   --Player.js (Class)
   --Ball.js (Class)
  -Helpers (Folder)
   --Draw.js (Class)
   --Helper.js (Class) 
  -GameType (Folder)
   --Game1.js (Class)
  </code></pre>
  
  <p>The classes that are dependent on one another are as follows.</p>
  
  <pre><code>Game is Dependent on 
  --Draw.js
  --Helper.js
  Player and Ball are Dependent on 
  --Helper.js
  Game1
  --Game.js
  --Ball.js
  --Player.js
  </code></pre>
  
  <p>The project loads with in an app.js file, and requires the game1 file. At the moment I am trying to test and get all the require and export statements working. Currently with in the app.js file I am able to create a game1 object but I am unable to access the variables and methods with in it. I can console log the object and it has all the correct variables and methods, so it is creating the game1 object correctly, but I can't access any part of it. I am unsure if I am currently using the require and export statements incorrectly for the ES6 class notation, or if there is another problem with my code. Am I using the require and export statments correctly?  </p>
  
  <p>Here are the snippets on the classes and the app.js file. Some of the methods 
  in a couple of the classes need to be finished, but I am trying to add in the require and export functionality to make the navigation of my code better. I hope you can help my find the solution to my problem.</p>
  
  <p>app.js </p>
  
  <pre><code>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 
  }
  </code></pre>
  
  <p>Game1.js </p>
  
  <pre><code>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;
  </code></pre>
  
  <p>Game.js works as an interface and also has variables necessary to all games</p>
  
  <pre><code>'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
  </code></pre>
  
  <p>Ball</p>
  
  <pre><code>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
  </code></pre>
  
  <p>Player </p>
  
  <pre><code>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) &gt;= (drawObj.getBaseHeight())){
              this.playerY = (drawObj.getBaseHeight() - this.paddleHeight);
          }
      }
  
      movePlayerAIInYDir(drawObj){
          this.playerSpeed = this.setBotDifficulty("Easy");
          this.playerY = this.playerY + this.playerSpeed;
          if(this.playe2Y &lt;= 0){
              //Hits Top 
              this.playerSpeed = (this.playerSpeed) * -1; 
          }
          else if((this.playerY + this.paddleHeight) &gt;= 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
  </code></pre>
  
  <p>Helper</p>
  
  <pre><code>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 &gt; 8 || speed &lt; -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
  </code></pre>
  
  <p>Thank you for the help.</p>