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

[8Observer8]

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);
    }
}

 

[8Observer8]

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)

 

[8Observer8]

I see that Pixi.js support AMD too: https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.0.4/pixi.js

	else
	{
	  // AMD
	  if (typeof undefined == 'function' && undefined.amd)
	  {
	    undefined(function(){
	      return nativePromiseSupported ? NativePromise : Promise;
	    });
	  }

 

[8Observer8]

I found the answer here: https://stackoverflow.com/questions/20295954/loader-requirejs-doesnt-respect-dependencies

I must use this construction in RequireConfig.ts:

    shim: {
        "pixijs": {
            exports: "PIXI"
        }
    }

 

[themoonrat]

Thanks for posting your solution! I'm sure it'll help others

[8Observer8]

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;
}

 

[8Observer8]

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.

[meiciuc]

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;
}

 

[8Observer8]

Read my instruction and build my example here: https://github.com/8Observer8/getting-started-with-pixijs-and-typescript