使用WebPack为Phaser.io创建库 - 类扩展值undefined不是构造函数或null

Question

我正在尝试为Phaser.io游戏引擎编写一个小型FOSS UI组件库。代码存在here。在src/目录中，我有一堆在index.js文件中导出的组件。这些组件使用webpack.config.js捆绑在一起并导出到build/phaser-ui.js。

我在使用构建的文件时遇到问题。在test/目录中，我创建了一个Phaser Game，用于使用phaser-plus Yeoman生成器进行测试。我的phaser-ui包安装在test的相关链接中的package.json中。这似乎工作正常。

我遇到的问题是我的phaser-ui文件似乎无权访问Phaser Library。在测试游戏中，我试图从phaser-ui package.json依赖项导入一个组件，但这会导致抛出以下错误。

在Game.js状态中：

import ProgressBar from "phaser-ui";

HTML5游戏开发论坛帖子here 来源回购here

Answer 1

在您的代码中，您从第1行开始：

/*
 * Star
 * ====
 *
 * Individual star paritcles in the background star emitters
 */

export default class Star extends Phaser.Particle {
// ...

您似乎尚未导入该库。 Phaser未定义，因此Phaser.Particle未定义。

在使用const Phaser = require('phaser');之前，您是否忘了Phaser？

或者，您可以执行import {default as Phaser} from 'phaser';如果您需要新语法，并设置了使用它的环境。

Answer 2

K所以我得到了一半的工作（更新 - 工作100％）。我每次都更改了测试脚本以在测试目录中正确地重新安装软件包：

PHASER-UI的package.json

"scripts": {
 "test": "npm run build && cd test && npm install phaser-ui && npm start",
 "build": "webpack"
},

测试包从本地NPM目录安装phaser-ui

TEST的package.json

"dependencies": {
    "phaser-ce": "^2.7.0",
    "phaser-ui": "file:../"
  },

然后，我将'Phaser'变量作为外部包含在我的webpack中

var webpack = require('webpack');

module.exports = {
    entry: './src/index.js',
    output: {
        path: 'build/',
        filename: 'phaser-ui.js'
    },
    //needed in my src library when extending/using Phaser objects/code
    externals: {
        Phaser: 'Phaser'
    }
};

所以现在它成功构建并且似乎有效。问题是我不知道如何在游戏状态下使用它。导入和记录它只显示控制台中的通用对象

import * as lib from 'phaser-ui';

export default class Game extends Phaser.State {

  create() {
    console.log(lib)
  }

}

更新

原来我需要在webpack.config.js中添加一些库配置。默认情况下，webpack libraries设计为通过scripts标记“安装”并通过全局变量使用。我希望我的库是import componentName from 'phaser-ui';使用的node_module，因此我需要将libraryTarget更改为umd。

最终webpack.config.js：

module.exports = {
    entry: './src/index.js',
    //setup the webpack output as a library
    output: {
        path: 'build/',
        filename: 'phaser-ui.js',
        libraryTarget: 'umd', //Honestly not sure of diffs between umd, amd, commonjs, etc (but umd works!)
        library: 'phaserUi'
    },        
    //needed in my src library when extending/using Phaser objects/code
    externals: {
        Phaser: 'Phaser'
    }
};