My website is built using vanilla HTML/CSS/JavaScript with ES6 modules and can be deployed to GitHub pages and Netlify. I have set up my site by importing "main.js" in my HTML like this:
<script src="js/main.js" type="module" defer></script>
Within my "main.js" file, I import custom modules as follows:
import * as data from './data.js';
import displayUserCard from './displayUserCard.js';
Now, I am looking to incorporate npm modules into my project just like I do with my own code. For example, I tried installing lodash with the command:
npm i lodash
However, when attempting to import lodash in my "main.js" file, I encountered an error due to differences between Node apps and browser environments.
^Uncaught TypeError: Failed to resolve module specifier "lodash". Relative references must start with either "/", "./", or "../".^
After researching various web bundling tools, I found that many are outdated or overly complex for my needs. What is the best approach in 2021/2022 to use npm modules like lodash in a vanilla frontend setup while ensuring easy bundling, building, and deployment on platforms such as GitHub pages, Netlify, and Vercel?