How can I use this lib with ES6 import? about layers

[ivanpopelyshev]

I don't know about ES6 target. My recommendation is not to use pixi and pixi-display as ES6 imports at all, only as global. If you know how to wrap it, modify "bin/pixi-display.js" the way you want it.

[lgraziani2712]

Can you explain why it is recommended to use PIXI as a global variable?

Thank you!

By the way, I will try to make it work with es6 import/export :)

[hameleonick]

Hi @lgraziani2712 ,

you could try
import * as PIXI from 'pixi.js';
import 'pixi-display';
for expample... it works for me

also I used http://scottmcdonnell.github.io/pixi-examples/index.html?s=display&f=zorder.js&title=Z-order&plugins=pixi-display example

[ivanpopelyshev]

If you find the way it works, I'll try to modify TS source that way too.

[jlost]

+1

[jlost]

Doesn't it seem wrong that you should "have" to import PIXI as *, rather than just importing the pieces you need in that module?

Either way, I realized that I can achieve the same things I wanted to use this plugin for by just designing with more Containers, and gave up on trying to make it work with my setup.

[hameleonick]

you also could do like this
import 'pixi-display';
import {DisplayGroup, DisplayList} from 'pixi.js';

[ByronHsu]

Just put bin in your repo. It works!

[yyman001]

you can require this js

let pixi_display = require('@/components/page/scene/pixi-layers')
//pixi-layers.js
(function (factory) {
  if ( typeof define === 'function' && define.amd ) {
    // AMD. Register as an anonymous module.
    define(['jquery'], factory);
  } else if (typeof exports === 'object') {
    // Node/CommonJS style for Browserify
    module.exports = factory;
  } else {
    // Browser globals
    factory(jQuery);
  }
}(function ($) {
  var pixi_display
 //some about pixi_display code
}))

[Scharnvirk]

Simply import 'pixi-layers' and then new PIXI.display.Layer() works.

[connorjclark]

FYI, you can do this to augment PIXI types with this lib's types too (requires typescript 3.8):

import * as PIXI from 'pixi.js';
import type {} from 'pixi-layers'; // typescript now knows about PIXI.display.Layer, etc. 

globalThis.PIXI = PIXI;
require('pixi-layers');

[pr4xx]

I had some trouble setting up my dev environment. I am using webpack via Laravels mix configuration. The import instructions from the docs work for me excpet I get a lot of warning when compiling:
"export 'display' (imported as 'PIXI') was not found in 'pixi.js'
Anyone know how to avoid those warnings?