8Observer8

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

Recommended Posts

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?

Share this post


Link to post
Share on other sites

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"
    },

 

Share this post


Link to post
Share on other sites

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.

 

 

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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?

Share this post


Link to post
Share on other sites
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 :) 

 

 

 

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.