8Observer8

[SOLVED] How to run Pixi.js (TypeScript) with AMD and Require.js?

Recommended Posts

EDITED: This problem is solved. The solution is in this message.

Hello,

Require.js does not understand '.' (dot) in the module name: "pixi.js". Here in the RequireConfig.ts file:

RequireConfig.ts

requirejs.config({
    baseUrl: "js",
    paths: {
        "pixi.js": "https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.0.4/pixi.min"
    }
});

requirejs(["Program"], () => { });

I changed "pixi.js" to "pixijs" in this file: "node_modules\pixi.js\pixi.js.d.ts" here:

declare module "pixijs" {
    export = PIXI;
}

But now PIXI is undefined in my example:


import * as PIXI from "pixijs";

export class Game
{
    public constructor()
    {
        const app = new PIXI.Application();

        console.log(app);
    }
}

 

Share this post


Link to post
Share on other sites

Is Pixi.js not compatible with AMD?

For example, gl-matrix: https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix.js You will see AMD:

if("function"==typeof define&&define.amd)define([],n);

Or Babylon.js: https://cdnjs.cloudflare.com/ajax/libs/babylonjs/4.0.3/babylon.max.js You will see AMD:

else if(typeof define === 'function' && define.amd)

 

Share this post


Link to post
Share on other sites

Yes, I solved the problem and I can set breakpoints, debug with Chrome extension in VSCode and even public my multi file examples on the Playground: click to run. This example just shows a version of Pixi.js.

But there are a little problem when I compile, bundle with Browserify and minify with UglifyJS. Because I renamed "pixi.js" to "pixijs" here in the "node_modules/pixi.js.d.ts" file:

declare module "pixijs" {
    export = PIXI;
}

 

Share this post


Link to post
Share on other sites
36 minutes ago, 8Observer8 said:

But there are a little problem when I compile, bundle with Browserify and minify with UglifyJS. Because I renamed "pixi.js" to "pixijs" here in the "node_modules/pixi.js.d.ts" file:


declare module "pixijs" {
    export = PIXI;
}

I solved this problem too. I just renamed "node_modules/pixi.js" to "node_modules/pixijs"

I think I made a good job. Now people can public examples on Sandbox to ask question using TypeScript. My example shows a version of Pixi.js. You can run it on the Sandbox: click run run. I have written an instruction how to run it locally: 

If you have question, please, ask me. If you do not understand something and you have errors ask me. I will improve my instruction on GitHub.

Share this post


Link to post
Share on other sites

Maybe there is a way to "rewrite" type definition? As an idea (I am poorly versed in the topic):

declare module 'pixijs' {
    import PIXI from 'pixi.js'    
    export = PIXI;
}

 

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...

  • Recently Browsing   0 members

    No registered users viewing this page.