使用 WebPack 为 Phaser.io 创建库 - Class extends value undefined is not a constructor or null

Question

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

我在使用 built 文件时遇到问题。在 test/ 目录中，我创建了一个 Phaser 游戏，用于使用 phaser-plus Yeoman 生成器进行测试。我的 phaser-ui 软件包安装在亲戚 link 的测试 package.json 中。这似乎工作正常。

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

在 Game.js 状态内：

import ProgressBar from "phaser-ui";

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

Answer 1

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

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

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

您似乎还没有导入库。 Phaser 未定义，因此 Phaser.Particle 未定义。

在使用 Phaser 之前，您是否忘记了 const Phaser = require('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安装

测试 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 are designed to be "installed" via a scripts tag and consumed via a global variable. I want my library to be a node_module that is consumed by an import componentName from 'phaser-ui';, so I needed to change the 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'
    }
};

使用 WebPack 为 Phaser.io 创建库 - Class extends value undefined is not a constructor or null

Creating library for Phaser.io with WebPack - Class extends value undefined is not a constructor or null

javascript

npm

phaser-framework

webpack

更新