stephenR Posted January 9, 2017 Share Posted January 9, 2017 Hi ! I'm a beginner with both pixi.js and vue.js and I can't manage to import pixi.js in my components. I tried different ways : - Import pixi.js in index.html via the CDN <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.2.2/pixi.min.js"></script> - Import pixi.js directly in my component (like in the example, it's working perfectly with TweenMax) import PIXI from 'pixi.js' import TweenMax from 'gsap' export default { name: 'home', mounted () { console.log('Mounted home, ready to PIXI') console.log(PIXI) } } The problem is that in my component, 'PIXI' is always undefined. Do you know if it's possible or if it's just me missing something. Thank you in advance. Quote Link to comment Share on other sites More sharing options...
mattstyles Posted January 10, 2017 Share Posted January 10, 2017 Unfortunately Pixi still doesn't play perfectly with a module system, however, you'll be able to get it to do what you want: Pixi 4.3.2 no longer exports a PIXI master object, instead you can grab what you need from the exports list, i.e. import {Container} from 'pixi.js' var stage = new Container() However, this all looks great but under the hood things are not so great. Pixi will still stamp out a global PIXI object and it'll include its polyfills whether you need them or not, if you're also including those polyfills (which is very easy to do if you're using Babel for your project) then you'll have them twice, possibly with conflicts in some part of your code, although I suspect there is a method to generate a pixi build without polyfills. I can only assume that some parts of the Pixi codebase still require the PIXI object to be global, hence why it sticks it there. Take a look at node_modules/pixi.js/lib/index.js to make more sense out of it. The reason your code does not work, even when PIXI is global, is because `import PIXI from 'pixi.js'` gets turned into a local variable PIXI which references nothing, if you're transpiling to commonJS then it'll get turned into `var PIXI = require('pixi.js')` (usually) and the pixi.js file that gets referenced has no default export, or no module.exports, so PIXI becomes undefined and as its now a local variable it'll take precedence over global.PIXI, which would be window.PIXI when it hits the browser. Many linters will prefer to prohibit you from using global objects directly and prefer you specify them with window.PIXI, which, in your case, would work with either the script include or the PIXI include. You can just include `import 'pixi.js'` in an entry file (or even into a script that gets run in the <head>, or use the cdn script include) and use the PIXI global or continue to specify each bit of pixi you want, seeing as how PIXI will pollute the global it doesn't really matter, a matter of preference for you. stephenR and labrat.mobi 2 Quote Link to comment Share on other sites More sharing options...
caymanbruce Posted January 10, 2017 Share Posted January 10, 2017 You can either import * as PIXI from 'pixi.js' or import {Sprite} from 'pixi.js' Either way the PIXI object is global you can use it any time without declaring it. For example you can just write const sprite = PIXI.Sprite.from(...); Quote Link to comment Share on other sites More sharing options...
stephenR Posted January 10, 2017 Author Share Posted January 10, 2017 Thanks all for your answers. I see now that I didn't understand well the context and import scope of Pixi.js. Moreover I won't need all the parts of the library so, importing only some exports (like in React for example) is gonna be cleaner for what I want to do. Thanks again ! Quote Link to comment Share on other sites More sharing options...
maitrungduc1410 Posted January 29, 2019 Share Posted January 29, 2019 I'm using Pixi with Vue, and even people said that we just need to import what we need using `import`, but when inspecting my built file, it still import all the library. I tried create only the application by using `import { Application } from 'pixi.js'`. After building files, it still import the whole PIXI Library, the same thing happen when I use ` import {Container}` or others components. I tried with React, and it's same. Then I realize that it just supports us to use `import` and the whole Library will be accompanied with every module you use. (try take a look at your app.js file after built) Quote Link to comment Share on other sites More sharing options...
botmaster Posted January 29, 2019 Share Posted January 29, 2019 That's the way PIXI is done, not much we can do about it besides building PIXI directly (with only the modules you need), this can also be done as part of the project compiling. Quote Link to comment Share on other sites More sharing options...
mattstyles Posted January 31, 2019 Share Posted January 31, 2019 Pixi is open source, if you see a better way to enable what you need, I'm sure they would love a pull request! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.