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

Question

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.net with all players
• Player profiles, showing the player statistics and a Leaflet.js 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 would like 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).

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

I have also asked my question at Github discussions.

UPDATE:

As suggested by tobifasc (thank you!) I have run the commands, but some of the produced files are empty and they are not concatenated together?

Answer 1

What you could do is create three new files in src/main/resources/js/:

1. bundle-main.js which looks like this:

import "./Base.js";
import "./Utils.js";
import "./Settings.js";
import "./Bookmarks.js";
import "./Score.js";
import "./Tile.js";
import "./Fullscreen.js";
import "./Board.js";
import "./Exists.js";
import "./Main.js";

2. bundle-top.js which looks like this:

import "./Top.js";
import "./Utils.js";

3. and bundle-player.js which looks like this:

import "./Base.js";
import "./Utils.js";

Then change your package.json to:

...
"targets": {
  "bundle-main": {
    "source": "./src/main/resources/js/bundle-main.js",
    "distDir": "./src/main/resources/bundles/"
  },
  "bundle-top": {
    "source": "./src/main/resources/js/bundle-top.js",
    "distDir": "./src/main/resources/bundles/"
  },
  "bundle-player": {
    "source": "./src/main/resources/js/bundle-player.js",
    "distDir": "./src/main/resources/bundles/"
  }
},
...

and run

$ npx parcel build --target bundle-top
$ npx parcel build --target bundle-main
$ npx parcel build --target bundle-player