How to concatenate js files into bundle-main.js, bundle-top.js, bundle-player.js?

[afarber]

Good evening,

I have developed and maintain a multiplayer word game, since maybe 8-10 years:

The backend for the game is a Maven project producing a servlet, written in Java.

And the Javascript files are just printed by the Java code - here a VS Code screenshot:

I would like to modernize the frontend part of my application by concatenating and minifying the JavaScript files.

In my application there are 3 types of web pages:

• The main one, showing the Pixi.js + jQuery game
• The top page, showing a DataTables with all players
• Player profiles, showing the player statistics and a Leaflet map

I would like to use parcel to generate:

• bundle-main.js
• bundle-top.js
• bundle-player.js

I have tried to create the following package.json, but of course it does not work yet:

{
  "outputFormat": "global",
  "targets": {
    "bundle-main": {
      "source": [
        "./src/main/resources/js/Base.js",
        "./src/main/resources/js/Utils.js",
        "./src/main/resources/js/Settings.js",
        "./src/main/resources/js/Bookmarks.js",
        "./src/main/resources/js/Score.js",
        "./src/main/resources/js/Tile.js",
        "./src/main/resources/js/Fullscreen.js",
        "./src/main/resources/js/Board.js",
        "./src/main/resources/js/Exists.js",
        "./src/main/resources/js/Main.js"
      ],
      "distDir": "./src/main/resources/bundles/bundle-main"
    },
    "bundle-top": {
      "source": [
        "./src/main/resources/js/Top.js",
        "./src/main/resources/js/Utils.js"
      ],
      "distDir": "./src/main/resources/bundles/bundle-top"
    },
    "bundle-player": {
      "source": [
        "./src/main/resources/js/Base.js",
        "./src/main/resources/js/Utils.js"
      ],
      "distDir": "./src/main/resources/bundles/bundle-player"
    }
  },
  "devDependencies": {
    "parcel": "latest"
  }
}

And I hope to generate the 3 bundle files (for inclusion as a "classic" Javascript, while the Pixi.js, jQuery, DataTables.net, Leaflet.js are included via links to CDN) by calling:

• parcel build --target bundle-main
• parcel build --target bundle-top
• parcel build --target bundle-player

However the files are not concatenated to a single file - and some of them are just empty:

Could someone please help me with my package.json file?

I have also asked my question at Stackoverflow.

Thanks