Best practice / workflow for working with npm and ESM/EcmaScript modules in Visual Studio?

  softwareengineering

I am somewhat new to npm in Visual Studio – and looking for some best practice / step-by-step guide of maintaining a web project that needs to use ESM modules (minified) in a .NET Razor 8.0 project. I am using Visual Studio 2022.

I have a web project where I need to use several ESM modules, for example https://uppy.io/docs/uppy/ for file uploading.

  1. From the VS terminal, I do this to install Uppy.

    npm install @uppy/core

  2. The npm package is downloaded a creates a bunch of files in the node_modules folder. Am I supposed to copy files manually from this folder to wwwroot/js/libs?

A colleague suggested to create a gulpfile.js that copies the relevant files from the node_modules folder to the wwwroot, but it seems to me that you have pick individual files from node_modules, which makes maintenance tedious in the future.

node_modules structure for uppy:

uppy node_modules folder

I could of course just use a CDN (e.g. jsDelivr) to load the relevant modules but for Uppy that means a 515kb package, and the modules need to be present on the local server.

What am I missing?
Can someone please give an example / guide on how to do this the most efficient way / best structure?

LEAVE A COMMENT