Question

我编写了一个预先存在的项目，该项目使用了许多ES6类而没有任何问题。这一次，我正在做同样的事情，但也使用Webpack 2来实现我计划最终添加的其他功能。使用运行脚本npm run build的{{1}}编译我的代码后（创建缩小的生产代码）。我还尝试使用-d参数和使用webpack-server运行相同的代码。

我收到错误webpack -p，我完全不知道如何解决它。当前代码只是我基于画布的应用程序的开始，我写的只是FPS计数器。我在这个网站，babel / webpack GitHub repos和其他博客/教程上进行了很多在线搜索，找不到任何有用的信息。

运行任何Webpack命令捆绑我的代码并将我的ES6代码转换为babel时，我没有错误，只有当我在浏览器中运行index.html文件时（文件和http协议都出错）。以下是可能有助于找到解决方案的所有代码/配置文件：

app.js

TypeError: undefined is not an object (evaluating 'this.currentSecond')

game.js

//js class imports
import { Game } from './game';

//assign HTML document elements to variables
let canvas = document.getElementById('game').getContext('2d');

//start the game on window load
window.onload = function(){
  //create the game in the "game" canvas
  var game = new Game(canvas);
}

webpack.config.js

export class Game {

  constructor(canvas) {
    //game engine variables
    this.ctx = canvas;
    this.currentSecond = 0;
    this.frameCount = 0;
    this.framesLastSecond = 0;

    //canvas settings
    window.requestAnimationFrame(this.draw);
    this.ctx.font = "bold 10pt sans-serif";
  }

  draw(){
    //calculate game frame rate
    var userSecond = Math.floor(Date.now()/1000);
    if(userSecond != this.currentSecond){
      this.currentSecond = userSecond;
      this.framesLastSecond = this.frameCount;
      this.frameCount = 1;
    }
    else{
      this.frameCount++
    }

    this.ctx.fillText("FPS: "+this.framesLastSecond, 10, 20);

    //drawGame
    window.requestAnimationFrame(this.draw);
  }
}

的package.json

var path = require('path');

module.exports = {
  entry: "./src/js/app.js",
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'app.bundle.js',
    publicPath: '/dist'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: ['es2015']
            }
          }
        ]
      }
    ]
  }
};

我希望这已经足够了，因为它几乎是我迄今所做的一切。感谢先进的任何人，他们可以提供帮助，或者选择解决类似问题的不同解决方案。

编辑：至于请求错误发生在哪里的评论，我的浏览器在game.js第18行说明这是一个问题，它是： { "name": "jsrpg", "version": "1.0.0", "description": "a game with js", "main": "app.js", "scripts": { "build": "webpack -p", "server": "webpack-dev-server -d" }, "author": "Matthew J. Moran", "license": "MIT", "devDependencies": { "babel-core": "^6.26.0", "babel-loader": "^7.1.4", "babel-preset-es2015": "^6.24.1", "webpack": "^4.6.0", "webpack-cli": "^2.0.14", "webpack-dev-server": "^3.1.3" }, "dependencies": {} } 我认为这不仅仅是这一行是一个问题，因为还有this.currentSecond的其他实例。

Webpack，Babel和ES6“TypeError：undefined不是ES6类的对象”

0 个答案: