Question

我尝试将“ 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

Answer 1

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

来自v5 migration guide：

[具有] Webpack和第三方插件，例如    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部分以告知您全局PIXI变量引用pixi.js的Webpack 模块。例如：
const webpack = require('webpack');

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

无法导入lib的插件

1 个答案: