Boilerplate StarterKit for Dist & Prod environment oriented GameDev es6++ with NWjs-Parcel-Babel-PixiJs
Easy starterkit low dependency including nwjs,parcel,babel,pixijs
FEATURE
- NwJs easy debug and auto prod for win,macos,linux x64 x86.
- Parcel custom API for bundling modules Distribution.
- Babel for convert Es6+ module to Es5 for web distribution
- Easy start node commands.
- Low dependency , Vanilla for js and nodeJs
- Auto copy folders for production nwjs.
- Allowed mixed code content (js,ts,WebAssembly) ...
- Debugger already setup for node and nwjs with vsCode
- Caching fast dist and test
- Good starter for understand Webpack like environnement
Quick start
** Download || fork || gitClone || open in Desktop **
# or CLI for clone the repo.
git clone --depth 1 https://github.com/djmisterjon/nw-parcel-pixi.git
CMD initialize
# install the projet dependencies (NEED)
npm i
# build your projet to dist folder for test and debug (NEED)
npm run dist
------
# produc final release of your app (win,macos,linux)
npm run prod
# build AND test your app with nwjs sdk
npm run nw
DEBUGGING
RUN CMD
# EDIT --nolazy --inspect-brk in script comand
FAST WORKFLOW, CODE AND RUN VSCODE
Already setup, but you can also customise shortcut inside launch.json
Just code and pres f12 to run your code inside nwjs.
{
"compounds": [
{
"name": "Launch & Debug",
"configurations": ["Launch NWjs"],
}
],
"configurations": [
{
"type": "nwjs",
"request": "launch",
"name": "Launch NWjs",
"runtimeExecutable": "${workspaceRoot}\\node_modules\\nw\\nwjs\\nw.exe",
"runtimeArgs": [
"--disable-raf-throttling",
"--remote-debugging-port=9222",
],
"webRoot": "${workspaceRoot}/dist",
"port": 9222,
"reloadAfterAttached": true,
"preLaunchTask": "npm: dist"
},
{
"name": "Launch dist",
"type": "node",
"request": "launch",
"cwd": "${workspaceFolder}",
"runtimeExecutable": "npm",
"runtimeArgs": ["run-script", "dist"],
"port": 9229,
"console": "integratedTerminal",
"autoAttachChildProcesses": true,
},
]
}
CUSTOMZE FINAL PRODUCTION
- for web version, you have nothing to do, just publish the
dist
folder. - For produce your desktop build, be sure your customized the
nw_package.json
insidesrc
folder. This one will be cloning to dist folder when you runnpm run dist
. Application entries start inmain.js
CUSTOMZE CONFIG
All custom configs are inside folder config
and are write in nodejs vanilla
dist.config.js
is the main buildernw.js
it the custom hack and cloning thenw_package.json
parcel.js
is the custom hack API for manage bundle to builddist
foldercopy.js
is the custom hack for cloning ressources fromscr
to distfolder
to make nwjs app work.
HotReload
For gameDev, hotReload are not commanded, but your can enable it inside
dist.config.js
just set watch: true,
if something wrong, clear .cache
folder.
DEPENDENCY
DEV DEPENDENCY
- "@babel/cli": "^7.8.4",
- "@babel/core": "^7.9.0",
- "@babel/preset-env": "^7.9.0",
- "nw": "^0.44.5-sdk",
- "nwjs-builder-phoenix": "^1.15.0",
- "parcel-bundler": "^1.12.4"
DIST DEPENDENCY
- "pixi.js": "^5.2.1"