pixijs5 [SOLVED] I need a simple project in the archive for Browserify with Pixi.js5 and TypeScript

[8Observer8]

I want to use Browserify with Pixi.js v5, because I want to create a lot of examples for learning and I do not want to use Webpack (Gulp, Grant and so on) because they require a lot of disk space on my laptop. I use TypeScript too. Could you give me a simple project in the archive with a few TypeScript files that allows me to create a bundle for Browser?

EDITED:

This problem is solved. The solution is in this message

[8Observer8]

I can explain what I want using the example. This example uses Babylon.js, TypeScript and it draws a cube. You can run it on Playground: click to run

This is an archive with source code: color-cube_babylonjs-typescript.zip This archive requires only 1.34 MB. If you unzip it you will see that it requires 7.52 MB. It is good because it allows to create a lot of examples for studying and it will not spend a lot of space on my laptop.

If you have the browserify and typescript that is installed globally you can bundle the "Program.ts" and "Game.ts" files using this command:

npm run release-client

The "bundle.min.js" file will be created in the "dist_client" folder. You can just open the "index.html" file in your browser. I use "http-server" module to run examples.

I need a similar archive with very simple Pixi.js example that contains a few TypeScript files.

My "release-client" command looks like this in the package.json file:

    "scripts": {
        "clear": "rmdir /s /q dist_client",
        "compile-debug-client": "tsc -p tsconfig.debug.client.json",
        "compile-release-client": "tsc -p tsconfig.release.client.json",
        "bundle-release-client": "browserify dist_client/Program.js -o dist_client/bundle.client.js",
        "uglify-release-client": "uglifyjs dist_client/bundle.client.js -o dist_client/bundle.client.min.js",
        "release-client": "npm run compile-release-client && npm run bundle-release-client && npm run uglify-release-client"
    },

 

[llpujol]

Here is one example: https://github.com/llorenspujol/parcel-pixijs-quickstarter
Is a simple quickstarter project with PixiJs and Typescript using Parcel.

Here are it's default scripts:

	"test": "karma start",
	"start": "npm run clean && parcel src/index.html",
	"build": "npm run clean && parcel build src/index.html --public-url ./",
	"build_serve": "npm run build && http-server ./dist",
	"clean": "rimraf ./dist ./.cache"

In order to build the project just run 'npm run build'. If you want also serve it, just run 'npm build_serve' (it uses http-server in order to serve it as you).


About the disk space, having the dependencies globally is not the best solution and it has a lot of troubleshoots. There are many other ways in order to 'share' dependencies between project more safer and efficient than that. You can have for example a 'monorepo' like infrastructure, in order to achieve it. Check it out yarn workspaces and the lerna project, I am sure it will make you re-think the way you are managing your projects.

One HUGE advantage of that, is that it will enable you to share ALL your dependencies, not only Browserify and Typescript. With this improvement, you will no longer need to zip/unzip your project anymore, since most of the MB you see now when zipping/unzipping are from the node_modules.

So in resume, check it out to move your examples into a monorepo-like infrastructure. With that, you will solve 2 problems:

1- Share ALL dependencies (and do it safely), since now you are only sharing Browserify and Typescript (as far as I know)
2- Avoid zipping/unzipping your project, that I am sure that is a costly extra step. That of course you can automatize or whatever, but you can get rid of it with this solution.

If you need some help about that 'monorepo-like' infrastructure, you can DM me.

 

 

[8Observer8]

17 minutes ago, llpujol said:

Using that type of dependencies sharing, you will not need to zip your projects, since as you said, these are little project, an most of the zip content may go into node_modules

It is my mistake. I make this only when I upload my projects on forums. Some forums has restrictions on the size of archive. I do not zip my projects on my laptop. Yes, I understand now that I can upload archives on the forums without the "node_modules" folder, because everyone can simple type: npm install

21 minutes ago, llpujol said:

Check it out yarn workspaces and the lerna project, I am sure it will make you re-think the way you are managing your projects.

It is very complicated for my but I will study it. I need to spend my time (in priority) to learn another thinks (not technical thinks). I spend a lot of time to learn how to run my examples with a few TypeScript files on Sandbox (https://plnkr.co/edit/ is the best for me). I use AMD and RequireJS for this. And I can to run Unit Tests using Jasmine from Sandbox. You can run this very simple example and click on the "Run Unit Tests" button on top left corner. I like write Specs for my examples and I like write Mock-objects for Injection Dependencies using "interface" keyboard from TypeScript (that is similar like in the book "Art of Unit Testing with C# Examples" (I study C# and Unity too). AMD and RequireJS allow me to debug my examples on VSCode (browserify does not allow me it). And I need to create browserify builds using CommonJS modules and Browserify. Thank you for your example. I will have questions later.

[8Observer8]

1 minute ago, 8Observer8 said:

You can run this very simple example and click on the "Run Unit Tests" button on top left corner.

I see the error. I will solve it later.

[8Observer8]

5 minutes ago, 8Observer8 said:

I see the error. I will solve it later.

Now it works. It was a problem on the server side of Plunker. I saw this error:

Quote

Oh dear, something didn't go quite right

Internal Server Error

 

[ivan.popelyshev]

I'm sure your thread was noticed but its difficult to answer right now  

[ivan.popelyshev]

Here's project without docs : https://github.com/eXponenta/pixi5-playables-boilerplate , it has big number of hacks to store everything in one file, I'm sure you can strip it down to make an example. Dont forget to star it.

It has gulp, but I dont think its possible to survive with just browserify. For example, I have projects that rely ONLY on typescript, but I never had something that has only browserify+ts, its usually more than that.

[8Observer8]

3 hours ago, botmaster said:

None of those require a lot of disc space especially compared to Browserify, where did you get that false information?

@botmaster I installed Browserify (and TypeScript) globally. Wepack requires about 100 MB. Browserify requires 0 MB.

[8Observer8]

On 5/27/2019 at 12:39 PM, llpujol said:

Here is one example: https://github.com/llorenspujol/parcel-pixijs-quickstarter
Is a simple quickstarter project with PixiJs and Typescript using Parcel.

You installed Pixi.js v5 like this:

npm i pixi.js

And you installed TypeScript definitions for Pixi.js like this:

npm i -D @types/pixi.js

But I read here: https://github.com/pixijs/pixi-typescript that it is TypeScript definitions for Pixi.js v4. Theses TypeScript definitions was updated 2 years ago. I think it is possible conflicts. Yes?

May be must I write my own TypeScript definitions for Pixi.js v5?

[ivan.popelyshev]

pixijs v5 typings are in the same pixi.js package. You dont need to install @types

[llpujol]

On 5/29/2019 at 4:15 PM, ivan.popelyshev said:

pixijs v5 typings are in the same pixi.js package. You dont need to install @types

Thank you, I have already updated the quick starter project  

 

 

 

[ivan.popelyshev]

@llpujol ok, its here: https://github.com/pixijs/pixi.js/wiki/v5-Boilerplate .

[8Observer8]

I made this instruction for Babylon.js, but I hope it will work for Pixi.js too:

• Debug, Release, Playground using BabylonJS and TypeScript (forum.babylonjs.com)
• BabylonJS and TS. Debug, Release, Playground (gamedev.net)

I will write such instruction for Pixi.js soon.

[8Observer8]

It is very important to set breakpoint in TypeScript code and execute a project step-by-step in VSCode using Chrome extension.

I found the solution. I use AMD and RequireJS for debug version and Browserify and UglifyJS for release version in one project. It will allow me to use Sandbox to public examples for questions about Pixi.js in TypeScript. It is very popular technique in JavaScript world when people use JSFiddle, CodePen or Plunker to ask questions.

My example shows how to public your multi file examples on Playground: click to run on Plunker

My instruction shows how to create a debug (AMD/RequireJS) and release (Browserify/Uglify) versions: https://github.com/8Observer8/getting-started-with-pixijs-and-typescript

[John Talbot]

On 6/3/2019 at 11:29 AM, ivan.popelyshev said:

@llpujol ok, its here: https://github.com/pixijs/pixi.js/wiki/v5-Boilerplate .

I so wish I found this before I figured out how to do this myself!  Thanks for the repo, there are still things I can learn.