Problems with VS Code JavaScript Intellisense and ES6 Import with Minified & Non-minified Version of JS

Question

Below is my Firebase hosting project folder structure:

projectFolder/store/public/scripts/*.min.js
projectFolder/src/*.js

After running terser, all my projectFolder/src/*.js will be minified to projectFolder/store/public/scripts/*.min.js as shown below:

EDIT: As requested by @Bergi, this is how my terser script looks like:

call terser src/site-ui-components.js -o store/public/scripts/site-ui-components.min.js -c -m
echo site-ui-components.min.js: Done.
call terser src/login.js -o store/public/scripts/login.min.js -c -m
echo login.min.js: Done.
call terser src/register.js -o store/public/scripts/register.min.js -c -m
echo register.min.js: Done.
call terser src/profile.js -o store/public/scripts/profile.min.js -c -m
echo profile.min.js: Done.

In my ES6 import, I do the following:

import { something1, something2 } from "/scripts/something.min.js";

This works fine during runtime, but I lose all the vs code intellisense for something1 and something2 during development time. If I enable the intellisense by doing the following, during runtime, my code breaks because obviously, it couldn't find "./something.js":

import { something1, something2 } from "./something.js"; // Error, something.min.js not found

I do not want to do something silly by adding the *.min.js to my all my non-minified js just to make both of them work. Secondly, I try to avoid using dynamic import by writing extra code to adapt to different environment.

So my question is:

1. How can I keep my intellisense for ES6 import without breaking my code during runtime?
2. Is there something wrong with my folder structure? E.g. not compliant to the best/common practice? Any recommendation?
3. Shall I, might as well, make the minified and non-minified js files as simply *.js instead?

Any advice would be much appreciated. Thank you!

Answer 1

After so much of searching and reading, I finally managed to figure out the use of baseUrl and paths of jsconfig.json in VS Code to solve my problems:

{
  "compilerOptions": {
    "baseUrl": ".",
     "paths": {
         "/scripts/*": ["./store/public/scripts/*"]
     }
  }
}

Explanations:

The goal here is to make the following import works for both /src/*.js and /store/public/scripts/*.min.js without losing the inteliisense:

import { something1, something2 } from "/scripts/something.min.js";

For my case, it doesn't really matter if my JS in src references to /scripts/*.min.js because *.min.js are always getting from the latest object interfaces from the src. Whenever I change any JS file in the src, I just run my terser script for the new changes to be reflected by the intellisense, so not a big deal. Therefore, in order for both /src/*.js and /scripts/*.min.js to import from the same source without breaking the code during runtime, I can configure my jsconfig.json as shown above to achieve this goal:

"baseUrl": "."

The "." is the projectFolder where my jsconfig.json is stored, namely projectFolder/jsconfig.json.

"paths": {
   "/scripts/*": ["./store/public/scripts/*"]
}

"/scripts/*" is the string pattern or import path that I use to reference the exported module files. So when I import { something1 } from "/scripts/something.min.js", VS Code always refers to "./store/public/scripts/*" for the intellisense.

I hope my explanation is clear to everyone.