未捕获的类型错误：视口不是构造函数

Question

I am trying to set a simple exemple of pixi-viewport .我正在尝试设置一个简单的pixi-viewport 示例。 It works fine with Pixi.js but even thought the script for pixi-viewport is found (viewport.js) I get:它适用于 Pixi.js，但即使找到了 pixi-viewport 的脚本（viewport.js）我得到：

Uncaught TypeError: Viewport is not a constructor未捕获的类型错误：视口不是构造函数

Here's the HTML file:这是 HTML 文件：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Hello Pixi</title>
</head>
<script src="pixi/pixi.min.js"></script>
<script src="pixi/viewport.js"></script>
<body>
    <script type="text/javascript">
        let Application = PIXI.Application,
            loader = PIXI.loader,
            resources = PIXI.loader.resources,
            Sprite = PIXI.Sprite;
            Graphics = PIXI.Graphics

        //Create a Pixi Application
        let app = new Application({
            width: 953,
            height: 409,
            backgroundColor: 0xFFFFFF
        });

        const viewport = new Viewport({
            screenWidth: window.innerWidth,
            screenHeight: window.innerHeight,
            worldWidth: 1000,
            worldHeight: 1000,

            interaction: app.renderer.plugins.interaction // the interaction module is important for wheel to work properly when renderer.view is placed or scaled
        })

        // add the viewport to the stage
        app.stage.addChild(viewport)

    </script>
</body>

</html>

Answer 1

So it turns out that since Pixi v5, the direct access to window.Viewport has been pulled out.所以事实证明，从 Pixi v5 开始，对 window.Viewport 的直接访问已经被撤掉了。

You need to use some sort of build system (like parcel, rollup, webpack, etc.).您需要使用某种构建系统（如 parcel、rollup、webpack 等）。 That will let you pull the libraries in from npm and make your life easier.这将使您可以从 npm 中提取库，让您的生活更轻松。

未捕获的类型错误：视口不是构造函数

问题描述

1 个解决方案

解决方案1
0 2020-05-20 15:03:36

未捕获的类型错误：视口不是构造函数

问题描述

1 个解决方案

解决方案1 0 2020-05-20 15:03:36

解决方案1
0 2020-05-20 15:03:36