How to bundle npm packages for vanilla JavaScript frontend development and production builds on CDN servers? - Stack Overflow

admin管理员组

文章数量:1355748

I have a vanilla HTML/CSS/JavaScript site (repository) which uses ES6 modules. It can be successfully deployed to GitHub pages and Netlify.

In my HTML, I import main.js like this:

<script src="js/main.js" type="module" defer></script>

In my main.js file, I import other modules I have made like this:

import * as data from './data.js';
import displayUserCard from './displayUserCard.js';

Now I want to also install and import npm modules to use on my site just as I use my own code on my site.

I install lodash like this:

npm i lodash

Then in my main.js file, I import lodash like this, just as I do in my Node apps:

import _ from 'lodash';

This of course doesn't work and gives me the following error, since we are now in the browser and not in a Node app:

^Uncaught TypeError: Failed to resolve module specifier "lodash". Relative references must start with either "/", "./", or "../".^

Researching this, I understand that such a development environment needs a web bundler, but I find everything from dated tools such as Browserify and RequireJS, to over-plex tools such as WebPack, to newer bundlers such as Parcel, Vite and Snowpack which all don't seem to address this problem of easily bundling npm packages for both development and production builds.

What is the most straight-forward way in 2021/2022 to use node modules such as lodash in vanilla HTML/CSS/JavaScript frontend apps so that they can be bundled, built and deployed at CDNs like GitHub pages, Netlify and Vercel?

I have a vanilla HTML/CSS/JavaScript site (repository) which uses ES6 modules. It can be successfully deployed to GitHub pages and Netlify.

In my HTML, I import main.js like this:

<script src="js/main.js" type="module" defer></script>

In my main.js file, I import other modules I have made like this:

import * as data from './data.js';
import displayUserCard from './displayUserCard.js';

Now I want to also install and import npm modules to use on my site just as I use my own code on my site.

I install lodash like this:

npm i lodash

Then in my main.js file, I import lodash like this, just as I do in my Node apps:

import _ from 'lodash';

This of course doesn't work and gives me the following error, since we are now in the browser and not in a Node app:

^Uncaught TypeError: Failed to resolve module specifier "lodash". Relative references must start with either "/", "./", or "../".^

Researching this, I understand that such a development environment needs a web bundler, but I find everything from dated tools such as Browserify and RequireJS, to over-plex tools such as WebPack, to newer bundlers such as Parcel, Vite and Snowpack which all don't seem to address this problem of easily bundling npm packages for both development and production builds.

What is the most straight-forward way in 2021/2022 to use node modules such as lodash in vanilla HTML/CSS/JavaScript frontend apps so that they can be bundled, built and deployed at CDNs like GitHub pages, Netlify and Vercel?

• javascript
• npm
• netlify
• jamstack

Share Improve this question Follow asked Dec 25, 2021 at 13:00 Edward TanguayEdward Tanguay 194k321321 gold badges725725 silver badges1.1k1.1k bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

What you need to do is install a javascript bundler that translates and stores all the needed modules(e.g lodash) in an accessible place for your browser to find.

Watch this video, its straight to the point and sums up everything.

本文标签：