Sign in to follow this  
daintycode

How to use pixi.js modules/libraries with typescript using npm?

Recommended Posts

First of all

Is it called "module" or "library" if it extends pixi.js' functionality?

How to use them with Typescript?

I'm not totally new to typescript but aren't pro w/ it at all.
I added pixi.js and the typings via npm (and successfully use npm-modules and their @types in typescript for the server of this project)

But when it comes to pixi.js modules things get weird, it's not enough to add them via npm and adding

import * as Stuff from 'pixi-module'

which makes sense, because afaik they extend the PIXI namespaces. So I tried adding this reference thing

/// <reference path="../node_modules/pixi-module/stuff.d.ts">

but even that did only work half-way. Hard to explain but it was like adding the Apples to PIXI, but not the AppleTree, if I may explain it this way. Even with `require('pixi-module')`

Even stranger: VSCode finds the module and even suggests it when writing an import statement. But after auto-completing it, it tells me the module is not found. (The webpack run tells me so, too.)

Tried it with @ivan.popelyshev pixi-projection, failed half-way and tried it again with pixi-particles. None of them did work as expected in the end.

Wat?

To conclude this: How to add modules after `npm install pixi-module` in my Typescript code, where I did `import * as PIXI from 'pixi.js'`

Thanks <3

Share this post


Link to post
Share on other sites
///<reference types="pixi.js"/>
///<reference types="pixi-display"/>

That's what you can use without ES6 import/export.

For modularity: https://github.com/pixijs/pixi-spine/blob/master/test/checkpack.ts It doesn't even have those two lines.

If you take pixi-spine, and run "yarn checkpack like here: https://github.com/pixijs/pixi-spine/blob/master/package.json#L33 , you'll see that it works with different packers.

Thanks to @cursedcoder who made that architecture.

Share this post


Link to post
Share on other sites

Thank you, now I learned how to import this stuff right. Just corrected my import pixi thing to the reference-stuff.

Now I'm trying this with pixi-particles (sorry for my ignorance and ignoring pixi-spine completely here) and I can reference it, it's found and webpack doesn't complain BUT `PIXI.particles.Emitter` is not defined.. :(

Share this post


Link to post
Share on other sites

Is it runtime or compile time error? According to https://github.com/pixijs/pixi-particles/blob/master/index.d.ts it doesnt have global exports. You can fix it that way it looks like https://github.com/pixijs/pixi-spine/blob/master/bin/pixi-spine.d.ts , and use <reference paths> onto modified file instead.

Share this post


Link to post
Share on other sites

But spine does not export it as a module, so its different. I dont know how to import particles in current state of plugin, may be you just get "import ... as particles" and use that as a namespace.

I don't use ES6 imports/exports at all so I really dont know. I gave you workaround, for better variants you can ask cursedcoder in our slack (want an invite?), or, im sure, you can do it yourself because now you have complete info on the issue.

I can rewrite pixi-particles on TS with our system later ;) Also, you can ask @bigtimebuddy

Share this post


Link to post
Share on other sites

DUDE I got it.

It felt dirty to change stuff in the node_modules, so I tried adding it via `///<reference path="../node_modules/pixi-particles/ambient.d.ts" />` and `require('pixi-particles')`. :D

I see that the problems with importing and using them with TS are module-specific. But with your help I understood this whole namespace/module/types-importing non-sense a bit more. :)

Yeah, I'm looking forward to some consistency and maybe a general way to use modules with TS, VSCode and all that stuff. The ES6 way and the oldschool way.

Share this post


Link to post
Share on other sites

Nice :) Yep, that's why I delegated this thing to @cursedcoder (at guthub) and he's also trying to make multi-module project with pixi plugins that works with import/export AND ts namespaces so there are no internal import/exports, just concat and namespace merging.

node.js and ES6 have many problems, and they just multiply them by refusing to adopt already working concepts from java and other langs. Instead its much simpler but for features that are really needed its much harder than in developed languages. I would be happy if architecture from Maven gets adopted somehow.

Share this post


Link to post
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.