Search the Community

Hello everyone, I'm suggesting using pixi (v5) for a component on a really bloated site, and its bringing too much weight to the final bundle. We don't need everything the library offers, so I was wondering if we can import what we need and maybe minimize the impact on the final bundle weight. Has anyone encountered a similar issue? How did you manage it?

Hello Everyone! I have just released an awesome bundle which contains 11 HTML5 Games at just $25. If you're interested, you can buy it from here : https://codecanyon.net/item/11-html5-games-bundle-construct-3-construct-2-c3p-capx/26764627 Thanks!

Html5 Game Bundle | Sale >> Click Here 1 - ( MR. Ant ) >> Click Here to Go to the Game Page and Play Demo 2 - ( MR. LONG LEG ) >> Click Here to Go to the Game Page and Play Demo 3 - ( Turn Left ) >> Click Here to Go to the Game Page and Play Demo 4 - ( Balloons Shooter ) Click Here to Go to the Game Page and Play Demo 5 - ( 5-REX ) >> Click Here to Go to the Game Page and Play Demo 6 - ( Spaghetti ) >> Click Here to Go to the Game Page and Play Demo 7 - ( Blue Pixel ) >> Click Here to Go to the Game Page and Play Demo 8 - ( Cute Shapes ) >> Click Here to Go to the Game Page and Play Demo 9 - ( DOT RUN ) >> Click Here to Go to the Game Page and Play Demo 10 - ( KING OF SNAKES ) >> Click Here to Go to the Game Page and Play Demo 11 - ( Baby Duck ) >> Click Here to Go to the Game Page and Play Demo 12 - ( Earth Defender ) >> Click Here to Go to the Game Page and Play Demo </a><br /> 13 - ( Cute Runners ) >> Click Here to Go to the Game Page and Play Demo 14 - ( DODO VS ZOMBIE ) >> Click Here to Go to the Game Page and Play Demo 15 - ( Sharks Quiz ) >> Click Here to Go to the Game Page and Play Demo 16 - ( 3 Cars ) >> Click Here to Go to the Game Page and Play Demo 17 - ( Two-Rex ) >> Click Here to Go to the Game Page and Play Demo 18 - ( Color Snake ) >> Click Here to Go to the Game Page and Play Demo 19 - ( TankZ ) >> Click Here to Go to the Game Page and Play Demo 20 - ( Stocks ) >> Click Here to Go to the Game Page and Play Demo 21 - ( DANGER Flappy ) >> Click Here to Go to the Game Page and Play Demo 22 - ( King Of Birds ) >> Click Here to Go to the Game Page and Play Demo 23 - ( Comparing Numbers ) >> Click Here to Go to the Game Page and Play Demo 24 - ( Gold Golf ) >> Click Here to Go to the Game Page and Play Demo 25 - ( MAGIC 8 BALL ) >> Click Here to Go to the Game Page and Play Demo 26 - ( King of Balls ) >> Click Here to Go to the Game Page and Play Demo 27 - ( Gem Game ) >> Click Here to Go to the Game Page and Play Demo 28 - ( Blue Car ) >> Click Here to Go to the Game Page and Play Demo 29 - ( FoozBaLL ) Click Here to Go to the Game Page and Play Demo 30 - ( Shape Shoot ) >> Click Here to Go to the Game Page and Play Demo 31 - ( NUMBERS ) > Click Here to Go to the Game Page and Play Demo 32 - ( Neon 360 ) >> Click Here to Go to the Game Page and Play Demo 33 - ( Crazy Driving ) >> Click Here to Go to the Game Page and Play Demo 34 - ( 20 Punch ) >> Click Here to Go to the Game Page and Play Demo 35 - ( DODO ) >> Click Here to Go to the Game Page and Play Demo 36 - ( Pink Box ) ;>> Click Here to Go to the Game Page and Play Demo 37 - ( Cute T-REX ) >> Click Here to Go to the Game Page and Play Demo 38 - ( zigzig ) >> Click Here to Go to the Game Page and Play Demo 39 - ( Color Shoot ) >> Click Here to Go to the Game Page and Play Demo 40 - ( 2PAC ) >> Click Here to Go to the Game Page and Play Demo

Caveat, I haven't tried this yet it's just a thought and am curious feasibility. Webpack 2 / Rollup Have build systems that tree shakes es6/typescript modules. Is it possible to build a BabylonJS project from BabylonJS src/ directory, and import modules individually to get the smallest bundle possible, or is it more problems than it's worth, or just not possible? Thanks!

Hi, Since the problem took me over a week to figure out, here is my solution to bundle your project using web-pack keeping Babylon as a dependency. NB: I am not certain what are the NECESSARY steps (ie what I could simplify) but those are SUFFICIENT steps. My constraints were : The final bundle can be imported both in the browser and in node using any kind of import method : require(), import/export, or <script src=...> tags It has to protect against errors in node due to access to window or document that will be undefined BABYLON has to load has a global in the browser using the script tag (window.BABYLON) BABYLON needs to include Canvas2D BABYLON needs to remain external of the bundle so the custom library is light and in theory could load any version of BABYLON Solution to protect loading in node.js: Build a custom bundle on Babylon website with Canvas2D ONLY, un-minified, and WITHOUT OIMO OR HANDJS. I did not test all possibilities but since the bundle is a concatenation suppose to be web compatible only, the exports will break in webpack or node in general. But using only this custom version will produce bugs in node due to access to undefined window. Then I had to bundle this custom build using webpack, you can see the configuration of webpack and the builder.js here : https://github.com/albertbuchard/experiment-babylon-js.git The important thing here is how the builder checks for window being defined and the webpack config exporting your named library with UMD. Publish this bundle to NPM (in the github look at the package.json it has three scripts to produce a unminified version, a minified version, and publish the repo on npm) Those two steps will allow to load Babylon using any kind of import method, and do not produce errors in node (but returns an empty object, of course any call to BABYLON function will fail) Solution to keep Babylon as a dependency in your custom library: In your library npm install the-custom-babylon-we-just-built Import BABYLON in your scripts any way you want using this custom repo ( es6 import syntax will work <3 ) i.e import BABYLON from 'the-custom-babylon-we-just-built' Then take a look at the webpack config and builder.js of this repo to understand how to manage EXTERNALS: https://github.com/albertbuchard/Experiment.js The key element here is how you write your external array: externals: { ... lodash: { commonjs: 'lodash', commonjs2: 'lodash', amd: 'lodash', root: '_', }, ... 'experiment-babylon-js': { commonjs: 'experiment-babylon-js', commonjs2: 'experiment-babylon-js', amd: 'experiment-babylon-js', root: 'BABYLON', }, ... 'experiment-babylon-js/lib/babylon.custom.js': { commonjs: 'experiment-babylon-js/lib/babylon.custom.js', commonjs2: 'experiment-babylon-js/lib/babylon.custom.js', amd: 'experiment-babylon-js/lib/babylon.custom.js', root: 'BABYLON', }, }, All but the root (Global environment reference) must be the NAME OF OUR MODULE as you would import it using require('NAME OF YOUR MODULE') so usually the name of your npm folder like the first two exaple, OR the direct path to the file you want to load like the third example. It has to be the same as the import names you are using in your library. So if you import babylon like so : // in your library const BABYLON = require('./path/to/babylon.js') // in your webpack config externals: { ... './path/to/babylon.js': { commonjs: './path/to/babylon.js', commonjs2: './path/to/babylon.js', amd: './path/to/babylon.js', root: 'BABYLON' } ... } Hope it will help some of you ! @Nikos123

Hey people; I have been developing a framework. I want to publish it as an npm package. I bundle my code with webpack on framework project and I am using bundled js file inside the game project which is bundled via browserify. I wanted to test it with different bundlers. My case is; On framework; the folder hieararchy is; -src --index.js -release --index.js Webpack bundles ./src/index.js to ./release/indes.js in ./src/index.js I have simplest code snippet as follows; module.exports = 'tattaratatta'; on game project that I use framework, I have app.js and bundle.js. on app.js inside the game project I have the following code; var fr = require('./../framework/release/index.js'); console.log(fr); this logs out an empty object. but when I change it to; var fr = require('./../framework/src/index.js'); console.log(fr); it logs out tattaratatta correctly. I watched some tutorials on youtube, read some tutorials online but can't find out what I am doing wrong. Appearently, I can't seem to require te module from the bundled file. Any idea?