How do I use an external value for JavaScript parameters?

Question

Suppose I've got a bunch of JavaScript files that build funcs something like:

me.add ([
panel1: [{
   url: 'https://localhost:8888/MyProj-0.0.1/resources/html/dir1/page1.html'
   }, {
   url: 'https://localhost:8888/MyProj-0.0.1/resources/html/dir2/page5.html'
   }]);

How can I use a property file to manage the front parts of all of these refs? ie, I'd like to change all 60+ of my JavaScript files that have functions like the above to be something like:

me.add ([
panel1: [{
   url: '($MagicGoesHere)/resources/html/dir1/page1.html'
   }, {
   url: '($MagicGoesHere)/resources/html/dir2/page5.html'
   }]);

so that I can read in a single property from a file in my project that defines the MagicGoesHere root for all of these references.

Note, I only want to do this as part of building my project; I do not need to read in a property and expose is on the webserver. (ie, when I deploy the WAR that gets built, all of the refs will have been expanded during the build)

My goal is to make it easy to update the refs when releasing MyProj-0.0.2

TIA,

Answer 1

You can easily just use a constants file.

my-constants.js

const myConstants = {
    baseUrl: 'http://localhost:8888/MyProj-0.0.1/'
};
module.exports = myConstants;

my-app.js

const myConstants = require('./my-constants');

me.add([
    {
        panel1: [
            { url : myConstants.baseUrl + 'resources/html/dir1/page1.html' }
        ]
    }
])

The above does not satisfy this constraint you placed upon the problem:

Note, I only want to do this as part of building my project; I do not need to read in a property and expose is on the webserver. (ie, when I deploy the WAR that gets built, all of the refs will have been expanded during the build)

However, I think it is worth asking if that is really necessary. There is no cost to the constants file. The amount of complexity you bring in with replacing source code during a build is non-trivial and it introduces new kinds of security concerns.

If you really want to do this as a build step, my favorite tool for the job is rollup-plugin-replace. It includes a few features you will probably want, like delimiters, without any cruft.