Не могу импортировать плагин для lib - PullRequest
Новая
       45

Не могу импортировать плагин для lib

1 голос
/ 24 мая 2019

Я пытаюсь импортировать плагин 'pixi-spine' в мой файл, куда я импортировал PIXI lib.Но я не могу этого сделать.Я использую веб-пакет для упаковки файлов.Я пробую другие варианты, чтобы сделать это, но у меня есть эта ошибка 

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 не определен

1 Ответ

1 голос
/ 25 мая 2019

Начиная с версии 5, PixiJS больше не предоставляет PIXI в глобальном пространстве имен.

Из руководства по миграции v5 :

[С] 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

Добавьте секцию plugins в webpack.config.js , чтобы сообщить Webpack, что глобальная переменная PIXI ссылается на модуль pixi.js.Например: 

const webpack = require('webpack');

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