Installing NPM package on frontend

I published my first NPM package.
I’ve seen people require packages with just
import _ from 'lodash'; (for example)
whereas I am having to specify the entire path './node_modules/copypaste-webcomponent/index.js';
I would prefer to just specify the name of the package. How do I make that possible?
I am using the native browser module support (has now landed in Firefox so is supported by all major browsers) rather than Webpack or another bundler.

I don’t think this is possible as of yet. Webpack knows where to look for modules and how to resolve CommonJS as well as ES6 modules, but the browser does not; AFAIK there’s not even a standardised way to specify native module entry points in the package.json.

And since npm packages typically only expose themselves as CommonJS modules anyway (or UMD for that matter), I guess your best bet is to keep using a module bundler (or loader) until the npm ecosystem really adapted to ES6 modules.

1 Like

The in-browser module loading is going to be pulling from a static source and won’t look in your node_modules, because it’s not an official standard it’s just an application. I wouldn’t expect the in-browser support to ever pull in a way that you want it to. The best you could probably do is build a sym-link to a top level folder or something to make it cleaner. The preferred way is still to use a bundler.

2 Likes

That makes sense, seeing as NPM, however popular it may be, isn’t part of the official web platform.

Standards are the to be as un-opinionated and organization agnostic as possible. Node and NPM are both opinionated and are backed by actual organizations. Popularity really has nothing to do with it. If that were the case, we would have had jQuery implemented into the spec directly instead of things like querySelector.

I see you tried that already here a year ago: Using npm modules - #9 by m3g4p0p

Where are you stuck exactly? :slight_smile:
Or did you try to get rid of webpack or any other bundler and load them directly?

1 Like

Hi @MartinMuzatko ,

I’m loading them without a bundler.
Bundlers are still faster than native modules, but if your not using that many, I doubt it makes much difference.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.