Best way to test fork of Pixi.js

[mobileben]

I wanted to experiment with some things in Pixi.js and then perhaps do a PR. Right now I'm looking for another way to override the resolution used by textures (as opposed to using @#x). I've forked and built Pixi.js. 

It dawns on me easy "hacking" would be to directly use the exported pixi.js file, make mods there, then later transfer them back into my fork. This way I could experiment and not have to always do rebuilds of the fork.

Quick note: I'm using Typescript and Webpack. I was using npm to install pixi.js.

My thought was to uninstall pixi.js. Then to copy my built version of pixi.js into my src directory. The problem with this is my import doesn't work right before. I am importing it using

import * as PIXI from 'scripts/pixi'

The source file I copied over was the generated pixi.js file which was in bundles/pixi.js/dist. I did not copy over the map file (although I just tried and it had no effect).

But I now get errors such as

Quote

ERROR in /Users/ben/Development/pixitests/resizing/src/scripts/app.ts

./src/scripts/app.ts

[tsl] ERROR in /Users/ben/Development/pixitests/resizing/src/scripts/app.ts(219,9)

      TS2339: Property 'view' does not exist on type 'Application'.

Where 'Application' is PIXI.Application.

What is the best way to add in pixi.js without using npm?

And I guess as a secondary question. Can I just add my own distribution and copy it into node_modules? 

What I'm looking for is the most efficient way to be able to experiment and mod pixi.js.

Early on I did try to use pixi.js directly, but found I ran into too may problems as well, so I jettisoned that approach and just used the npm package for it.

Please note, I'm new to the whole Typescript/webpack game and learning. So I more than likely have introduced a lot of "user error".

[ivan.popelyshev]

I've tried to run `npm link` inside "bundles/pixi.js" and i dont remember if it worked, you can try. 
both bundles of pixijs (pixijs, pixi-legacy) have two versions: one for vanilla (just es5 js file)  and es6 lib. When you open "bundles/pixi.js/lib" you see that es6 version that is taken by webpack.

> I'm new to the whole Typescript/webpack game 

Welcome! It sucks. Personally, I use namespaces , no imports at all, no webpack/rollup. I'll get people who know that stuff in this thread

[mobileben]

Sigh. I tried `npm link`. However I suspect that the way pixi.js is being built, it's not conducive for using npm link.

I'm basing this because the name of the package is actually "pixi.js-monorepo". So when link happens, it creates that link, not the link you need. I had to manually create a symlink, which more or less to me is a warning something is wrong.

I believe I have all the links set up, but now when I try and build, it can't even find any trace of pixi.js. This could be because the symlink into my projects node_modules is essentially the root directory for my local copy of the repo. There is no scoping folder (eg. @ pixi) like when there is a normal npm install.

Are people forking the code and finding fast ways to iterate the coding cycle? There isn't much documentation on this, so unfortunately for those with less build experience end up having an even bigger hill to climb.

I know it's doable. I'll more or less need to simplify my cases and build a test case where I modify a pixi.js file and then move my changes in and build and rinse and repeat. That comes across as clumsy and unoptimal. Which then makes me think I'm missing a trick.

Heh, and yeah, Webpack sucks. Not sure what it is with the JS world, but they seem to love tools which are blackboxes to most people.

[mobileben]

So I sort of have it working, but find some inconsistencies, no doubt by something I'm doing. 

I would assume if I do a `npm run build` that it will build everything. This includes updating bundles/pixi.js/dist.

What I have found is that I can make some mods, however when I re-run `npm run build`, the generated es.js files seem updated, but the actual pixi.js doesn't have my changes.

What I have done is inserted a new function into getResolutionOfUrl.js. I've even tried to rename getResolutionOfUrl. After the first build, it never seems to try to rebuild these files. 

So I seem to be missing a trick. The generated pixi.js.d.ts file has the new function name. pixi.js does not.

I tried to do an `npm run clean`, but that generates an error which I put below. That directory integration-tests/node_modules doesn't exist.

Oh, BTW, what it seemed worked was creating the link in the bundles/pixi.js directory. However this needed to be done prior to npm install and npm run build.

If I can find out why my npm run build is not really building, then I should be able to work from there.

Quote

lerna info clean removing /Users/ben/Development/3rdParty/ben.pixi.js/tools/integration-tests/node_modules

/Users/ben/Development/3rdParty/ben.pixi.js/node_modules/rimraf/bin.js:47rty/ben.pixi.js/tools/integration-tests/node_modules

      throw er

      ^

 

Error: EACCES: permission denied, rmdir '/Users/ben/Development/3rdParty/ben.pixi.js/bundles/pixi.js/node_modules/@pixi'

lerna ERR! Error: Command failed: /usr/local/bin/node /Users/ben/Development/3rdParty/ben.pixi.js/node_modules/rimraf/bin.js --no-glob /Users/ben/Development/3rdParty/ben.pixi.js/bundles/pixi.js/node_modules/

lerna ERR!     at makeError (/Users/ben/Development/3rdParty/ben.pixi.js/node_modules/execa/index.js:174:9)

lerna ERR!     at Promise.all.then.arr (/Users/ben/Development/3rdParty/ben.pixi.js/node_modules/execa/index.js:278:16)

lerna ERR! lerna Command failed: /usr/local/bin/node /Users/ben/Development/3rdParty/ben.pixi.js/node_modules/rimraf/bin.js --no-glob /Users/ben/Development/3rdParty/ben.pixi.js/bundles/pixi.js/node_modules/

npm ERR! code ELIFECYCLE

npm ERR! errno 1

npm ERR! pixi.js-monorepo@ clean: `lerna clean`

npm ERR! Exit status 1

npm ERR!

npm ERR! Failed at the pixi.js-monorepo@ clean script.

npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

 

npm ERR! A complete log of this run can be found in:

npm ERR!     /Users/ben/.npm/_logs/2019-09-05T00_51_07_895Z-debug.log

 

[mobileben]

Okay, I believe I have figured this out. While I eventually sort of got `npm link` working, it generates a bunch of errors.

First trick is you need to link bundles/pixi.js as this is where the actual standalone exists. The next "trick" deals with linking.

I also discovered that when running `npm link` it also installs dependencies under bundles/pixi.js/node_modules. When it does this, it actually copies in the actual @pixi dependencies whereas when `npm run build` is executed, it creates symbolic links to the generated node_modules under packages. This really threw me for a loop when figuring this out, since I had to determine why any changes I made were not showing up.

Previously I thought that I needed to run `npm link` and then install. However, this was incorrect. If you run `npm link` first, those the symlinks are not created. Also note that when `npm link` I had to use sudo as on my machine, my global node_modules is owned by root. That all being said, in the end I decided to forgo using `npm link` and instead manually created symbolic links.

This leads to the following steps:

1. Clone repo (either actual or your fork)

2. Create symbolic link using

ln -s REPO_DIRECTORY/bundles/pixi.js /usr/local/lib/node_modules/pixi.js

Where REPO_DIRECTORY is your repo directory. YMMV depending on where node is placed on your machine. If you're on Windows and don't have unix commands, you'll need to create the appropriate shortcut.

This replaces `npm link`

3. In your project directory, in the node_modules directory

ln -s /usr/local/lib/node_modules/pixi.js pixi.js

If you had pixi.js already installed via npm, you will need to uninstall it first.

4. You can now install and build (You could have done this earlier as well). So, go back to REPO_DIRECTORY and

npm install
npm run build

5. Back in your project directory, if you're running Webpack, than add the following to your Webpack.config.js file, if you need to make sure your resolve has symlinks set to true.

   resolve: {
        symlinks: true,
        modules: ['src', 'node_modules'],
        extensions: ['.ts', '.tsx', '.js']
    }

Note that I just copied and pasted what I had.  

6. Profit

Another interesting quirk I noticed from this whole thing, is to generate a proper .d.ts file, you need to make sure anything you export is commented properly. Else you will find the code is generated (eg. pixi.js) but the declaration file will not have it defined.