Visual Studio Code – How to set up a VS Code project that includes referenced JavaScript npm modules

I have a web project that uses TypeScript and I’m able to easily import, see and use npm modules, but when I load the web page in the browser the npm modules are not found.

My VS Code project is set up like so:

/mypage.html
/myproject.ts (my typescript)
/myproject.js (javascript created by typescript)
/tsconfig.json
/.vscode/tasks.json

If I reference a library in my TS file and view it in the browser it can’t find that module or gives other errors. See below.

But if I manually go into the npm module and dig around and find the library.js file and then copy that to a folder in the root directory then the web page in the browser can see and use that library. This works but by manually copying the library into the main source directory I’m losing many of the benefits of npm.

I believe if I can define an export directory for all the web page files I can have my TypeScript files copied to it, my HTML pages copied to it and npm modules copied to it, then I believe it will work when run in the browser. It seems it should work this way?

Is there a way to do this? Is there a way to do this with tsconfig.json or jsconfig.json? Is there a webconfig.json or vscodeconfig.json that will copy all files in a directory to another directory (including referenced npm modules)?

I have a Node.js Express project that uses TypeScript and any imported libraries just work. I don’t have to do anything to get it to work (tsconfig.json maybe). I want that same thing for my client side TypeScript that compiles to JavaScript used in web pages project.

I feel like this should be basic 101 web development (and it works to a point) but I can’t seem to find a way to get it to integrate the npm modules in the output.

Note: Suggestions have been pointing to using bundler. I’ve started down this path but still learning. See below.

More info:

I’m using a local server (http://localhost) to load the web page (there are plugins for vscode) in the browser. I have a separate project that is a nodejs project that starts a nodejs server, also running localhost.

TS to JS is converted by settings in the tsconfig file. I have file watcher on so that saving typescript files creates the js files.

I’m not using webpack or any other bundler and many have been suggested. I’m not against it only I haven’t found a guide yet and some are confusing. Most guides I found are how to setup a React or Next js project. I want to setup a vanilla js project. A few projects like Snowpack or Vite look like what I want but I can’t tell if it’s a plugin for vscode or a vscode replacement (it looks like a replacement). Some of them seem to run in the browser.

I’ve also just read about import maps. This looks helpful because it can point to the npm modules on a remote site if they exist already. But I don’t know how it will work locally. I will try to see if I can get import maps working.

I want to use this module in my web projects. Specifically BaseClass.ts.

Web Project Example
My basic web project that that is related to this question is here. It is all setup and working except for the issue mentioned in this post (the module is not rolled up, bundled or exported or included when typescript is compiled or when the page is viewed in the browser).

I just updated the npm package (1.0.2) to include Javascript files. I had only had Typescript files before. Not sure if it helps.

.vscode/tasks:

{
    "version": "2.0.0",
    "tasks": [
        {
            "type": "typescript",
            "tsconfig": "tsconfig.json",
            "option": "watch",
            "problemMatcher": [
                "$tsc-watch"
            ],
            "group": {
                "kind": "build",
                "isDefault": true
            },
            "label": "tsc: watch - tsconfig.json"
        }
    ]
}

tsconfig.json (suggestions welcome!)

{
  "compilerOptions": {
    "target": "es2016",
    "module": "commonjs", 
    "inlineSourceMap": true,
    "esModuleInterop": true,  
    "forceConsistentCasingInFileNames": true, 
    "strict": true,
    "noImplicitOverride": true,
    "allowUnreachableCode": true,
    "skipLibCheck": true
  }
}

With the tsconfig settings I have above I get errors and the library is not found.

script.js:2 Uncaught ReferenceError: exports is not defined
    at script.js:2:23

The source tab shows only the script.js file is included (the npm module is not found or included):

HTML: (simplified)

<script type="module">
import {BaseClass} from "base-class-ts"

export class MyClass extends BaseClass {

    constructor() {
        super();
        console.log("Hello world")
    }
}

BaseClass.startWhenReady(MyClass);
</script>

If you are working on an answer for the bounty and using a bundler, please add how to support source maps (if possible).

This is already a long post but I’m putting some things I find here (rather than in a comment or an answer) and no I haven’t tried them all I’m still figuring this out too:

• Using import maps to access the node module:
  https://youtube.com/watch?v=En1lSiMjLvU