Ajuda com aprendizado em javascript - babylonjs - webpack. Classe náo compila com variaveis da classe.

[Blackbeard 0]

Ola, boa tarde.

Estou tentando montar um projeto de game de cartas em webgl usando babylonjs+webpack. O problema é que na hora de compilar uma classe, o webpack não esta deixando se eu declaro variaveis da classe logo acima do construtor, retornando o seguinte erro:

Erro:

RROR in ./src/game.js 33:9
Module parse failed: Unexpected token (33:9)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| export default class Game {
|
>     scene;
|     clickedButtonBJ;
|
 @ ./src/index.js 3:0-29 17:15-19

Segue meus arquivos de configuração do webpack e do package.json e o código especifico da classe game.js.

 

Webpack.config.js

const path = require('path')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      filename: 'index.html',
      inject: true,
      template: path.resolve(__dirname, 'src', 'index.html'),
    }),
  ],
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
            presets: ['es2015']
        }
    }
    ]
  }
}

 

 

package.json:

 

{
  "name": "synthgaming.tech",
  "version": "1.0.0",
  "description": "",
  "main": "index.ts",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "run-dev": "npx webpack-dev-server",
    "build": "webpack --config=webpack.config.prod.js",
    "build-dev": "webpack --config=webpack.config.dev.js",
    "start": "webpack-dev-server --config=webpack.config.dev.js --open"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babylonjs/core": "^4.1.0",
    "@babylonjs/gui": "^4.1.0",
    "@babylonjs/inspector": "^4.1.0",
    "@babylonjs/loaders": "^4.1.0",
    "@babylonjs/materials": "^4.1.0",
    "@babylonjs/post-processes": "^4.1.0",
    "@babylonjs/procedural-textures": "^4.1.0",
    "@babylonjs/serializers": "^4.1.0",
    "clean-webpack-plugin": "^3.0.0",
    "html-webpack-plugin": "^4.2.0",
    "ts-loader": "^7.0.0",
    "typescript": "^3.8.3",
    "webpack": "^4.42.1",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"
  },
  "dependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-env": "^1.7.0"
  }
}

game.js:
 

import {
    Vector3, Color3
} from "@babylonjs/core/Maths/math";
import {
    ArcRotateCamera
} from "@babylonjs/core/Cameras/arcRotateCamera";
import {
    HemisphericLight
} from "@babylonjs/core/Lights/hemisphericLight";
import {
    Mesh
} from "@babylonjs/core/Meshes/mesh";

import {
    GridMaterial
} from "@babylonjs/materials/grid";

import {
    Sound, HighlightLayer
} from "@babylonjs/core"

import { 
    Image, Control, AdvancedDynamicTexture, Button, TextBlock
} from "@babylonjs/gui";

import { 
    Scene 
} from "@babylonjs/core";


export default class Game {

    scene;
    clickedButtonBJ;

    constructor(){
        // this.scene = _scene;
        this.clickedButtonBJ = false;
    }

    

   

    Start(scene) {
        

        var camera = new ArcRotateCamera("gameCamera", 0,0,0, new Vector3(0, 5, -10), scene);
        camera.setPosition(new Vector3(0,1,-40));
        camera.setTarget(Vector3.Zero());

        var light = new HemisphericLight("light1", new Vector3(0, 1, 0), scene);
        light.intensity = 0.49;

             
        var tetraMaterial = new GridMaterial("Tetragrid" , scene);
            
        var tetra = new Mesh.CreatePolyhedron("tetra", {type: 0, size: 3}, scene);
    
        tetra.position.y = 4.8;
        tetra.position.z = -15;
        tetra.rotation.z = Math.PI/2;
        tetra.rotation.x = 4*Math.PI/3;
    
        var hl1 = new HighlightLayer("hl1", scene);
        hl1.addMesh(tetra, Color3.Magenta());
        
        tetra.material = tetraMaterial;
    
        var groundMaterial = new GridMaterial("grid", scene);
        groundMaterial.lineColor = new Color3(2,2,4);
      
        var ground = new Mesh.CreateGround("ground1", 600, 600, 3, scene);
        ground.material = groundMaterial;
    
        var advancedTexture = AdvancedDynamicTexture.CreateFullscreenUI("UI", scene);
    
        var titleImage = new Image("title","../res/Title.png");
        titleImage.width = "800px";
        titleImage.height = "300px";
        titleImage.top = "-50px";
        titleImage.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_CENTER;
        titleImage.verticalAlignment = Control.VERTICAL_ALIGNMENT_TOP;
        advancedTexture.addControl(titleImage);
    
        var backMusic = new Sound ("Music", "../res/raia-bellzy.wav",scene, null, {
            loop: true,
            autoplay: true 
            });

        var alpha = 0;
        scene.registerBeforeRender(() => {

            

            tetra.rotation.y += 0.005;

            alpha += 0.03;
            hl1.blurHorizontalSize = 0.3 + Math.cos(alpha) * 0.6 + 0.6;
            hl1.blurVerticalSize = 0.3 + Math.sin(alpha / 3) * 0.6 + 0.6;
        });

    }

    createNewScene(_engine) {
        var scene = new Scene(_engine);
        scene.autoClear = false;

        var camera = new ArcRotateCamera("gameCamera", 0,0,0, new Vector3(0, 5, -10), scene);
        camera.setPosition(new Vector3(0,1,-40));
        camera.setTarget(Vector3.Zero());

        var light = new HemisphericLight("light1", new Vector3(0, 1, 0), scene);
        light.intensity = 0.49;

        return scene;
    }

    disposeScene(_scene) {
        _scene.dispose();
    }

    createPrimaryMenu(_scene) {
        
        var advancedTexture =  new AdvancedDynamicTexture.CreateFullscreenUI("PrimaryUI", _scene);
       
        var buttonBJ = Button.CreateSimpleButton("butBJ","BlackJack");
        buttonBJ.width = "250px";
        buttonBJ.height = "80px";
        buttonBJ.color = "Black";
        buttonBJ.cornerRadius = 3;
        buttonBJ.background = "magenta";
        buttonBJ.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
        buttonBJ.left = "50px";

        buttonBJ.onPointerMoveObservable.add(function(){
            textblock.text = "Click to Play BlackJack"
        });
        buttonBJ.onPointerOutObservable.add(function() {
            textblock.text = "";
        });
        buttonBJ.onPointerUpObservable.add(function () {

            //// 
            
            this.clickedButtonBJ = true;
            console.log("0.8");

        });
        advancedTexture.addControl(buttonBJ);
 
        var textblock = new TextBlock("textblock", "");
        textblock.width = 0.2;
        textblock.height = "40px";
        textblock.color = "White";
        advancedTexture.addControl(textblock);

    }

}

Eis a questão, Se eu removo as duas linhas:

 

scene;
clickButtonBJ;

 

o código roda e eu consigo acessar o site... no entanto, não carrega na página a titleImage e nem a musica.

Alguém pode me ajudar?

Obrigado.