时间戳

首页 > 解决方案 > 无法为 lib 导入插件

javascript - 无法为 lib 导入插件

问题描述

我尝试将“pixi-spine”插件导入到我导入 PIXI lib 的文件中。但我做不到。我使用 webpack 来打包文件。我尝试了另一种变体来做到这一点，但我有这个错误

import * as PIXI from 'pixi.js';
import {Spine} from 'pixi-spine';

import * as spineJSON1 from '../../../../../src/theme/assets/spine/ship_1_col_1.json';

export function newAnimations() {

  const app = new PIXI.Application();
  document.body.appendChild(app.view);

// load spine data
  app.loader
    .add('ship_1_col_1', spineJSON1)
    // .add('ship_1_col_1', 'src/theme/assets/spine/ship_1_col_1.json')
    .load(onAssetsLoaded);

  app.stage.interactive = true;
  app.stage.buttonMode  = true;

  function onAssetsLoaded(loader, res) {
    const ship_1_col_1 = new PIXI.spine.Spine(res.ship_1_col_1.spineData);

    // set current skin
    ship_1_col_1.skeleton.setSkinByName('ship_1_col_1');
    ship_1_col_1.skeleton.setSlotsToSetupPose();

    // set the position
    ship_1_col_1.x = 400;
    ship_1_col_1.y = 600;

    ship_1_col_1.scale.set(1.5);

    // play animation
    ship_1_col_1.state.setAnimation(0, 'idle', true);

    app.stage.addChild(ship_1_col_1);

    app.stage.on('pointertap', () => {
      // change current skin
      const currentSkinName = goblin.skeleton.skin.name;
      const newSkinName     = (currentSkinName === 'goblin' ? 'goblingirl' : 'goblin');
      ship_1_col_1.skeleton.setSkinByName(newSkinName);
      ship_1_col_1.skeleton.setSlotsToSetupPose();
    });
  }
}

但我有来自“pixi-spine”的错误 - 未定义 PIXI

标签： javascriptanimationpixi.jsspine

解决方案

从版本 5 开始，PixiJS 不再提供PIXI全局命名空间。

从v5 迁移指南：

[使用] Webpack和 3rd-party 插件，例如 pixi-spine，您可能难以构建全局PIXI对象，从而导致运行时错误ReferenceError: PIXI is not defined。通常这可以通过使用Webpack shimming globals来解决。

例如，这是您的导入代码：

import * as PIXI from 'pixi.js';
import 'pixi-spine'; // or other plugins that need global 'PIXI' to be defined first

在 webpack.config.js 中添加一个plugins部分，让Webpack知道全局PIXI变量引用了pixi.js 模块。例如：

const webpack = require('webpack');

module.exports = {
    entry: '...',
    output: {
        ...
    },
    plugins: [
     new webpack.ProvidePlugin({
       PIXI: 'pixi.js'
     }) ] }

推荐阅读