4 ms·

Is there a similar site but for browser only javascript libraries? I am not a web developer, and always find NPM etc way too much for my occasional needs. Whe

Is there a similar site but for browser only javascript libraries? I am not a web developer, and always find NPM etc way too much for my occasional needs. When I search internet for anything, 90% of the times I get an NPM based library that can not work in browser with just a <script src="lib.js">. JavaScript has improved a lot and does not really need Node/compilation steps for almost all my use cases. Is there anything where I can search for browser only, client side javascript libs?

toastercat 3y ago
You can usually browse npm for what you need, and when you want to use it, look at unpkg.com/<name of package> Usually this will give you a .min.js file ready for you to script include on your site, for example, unpkg.com/mithril Sometimes library authors don't default the export to a browser ready minified version or ESM module, in which case, you can snoop around the built package at unpkg.com/browse/mithril/. Most READMEs worth a damn should tell you how to use their libraries without npm if possible. Unfortunately, a lot of library authors suck.
- joshstrange 3y ago
  > Unfortunately, a lot of library authors suck. The nerve of them not catering to the small percentage of use cases for a project they often do in their free time and often for free. The entitlement is real.
  - toastercat 3y ago
    Sorry I forgot we're not allowed to criticize open-source maintainers ever. But as a library author myself, it takes less than 10 seconds to add such a section in my README.
- lakpan 3y ago
  Unpkg just serves the raw files, which may contain require() calls or import from other npm packages. That won’t work. The closest service is https://esm.sh https://esm.sh, but you can’t download from it.
  - toastercat 3y ago
    Unpkg serves whatever is published to NPM, and if it's a library intended for the browser, that often includes minified versions ready for use in script tags, for example, https://unpkg.com/mithril@2.2.2/mithril.min.js https://unpkg.com/mithril@2.2.2/mithril.min.js. Sometimes the default export is CJS (which has require() calls), in which case, you can usually use the browse url that I mentioned to see if there's another export you can use. https://esm.sh/ https://esm.sh/ is definitely a good option too if you're OK with modules.
    - lakpan 3y ago
      Yeah but that's rarely the case, you can't offer that as a generic "solution" to the problem at hand. It's just Mithril's choice to both publish to npm and to officially link to unpkg. Packages can make different choices, like publishing to GitHub releases or just to include the file in the GitHub repo. The reality is that only frameworks and very popular browser-specific packages do that.
      - toastercat 3y ago
        I said "often", but you say "rarely", so I guess we'll just have to agree to disagree here. :)
MrJohz 3y ago
For that you probably want unpkg, there might be some other similar alternatives that you can look for if you want. They're essentially mirrors of NPM but they automatically bundle packages up and serve it via http like a normal web JS file. Some things still won't work because they rely on some server side library, like loading files or something, but you won't want those for web development anyway. You might also find that some libraries don't handle being included as a script very well, but you can instead use the import statement and that will probably work better - use <script type="module"> and inside that use import something from "<whatever the unpkg URL is>". For production usage this isn't ideal because you're not as in control of the code you're depending on, it's less reliable, and it's more requests than if you just bundled everything together, but not everything needs to be for production usage!
lakpan 3y ago
> Is there anything where I can search for browser only There used to be bower, thankfully that’s now gone. > JavaScript has improved a lot So has its ecosystem. Setting up parcel or Vite is straightforward and should get you out of those problems. The time when you could just download a .js file and stick it in your vendors folder is long long gone. Please bundle and minify your files before serving them.
mhagemeister 3y ago
I think you're looking for esm.sh . It transpiles both npm and jsr packages for the browser so that they can be used in a simple script tag.
silverwind 3y ago
`<script src="lib.js">` is legacy, you are supposed to `import` nowadays, like from unpkg.

toastercat 3y ago

You can usually browse npm for what you need, and when you want to use it, look at unpkg.com/<name of package> Usually this will give you a .min.js file ready for you to script include on your site, for example, unpkg.com/mithril Sometimes library authors don't default the export to a browser ready minified version or ESM module, in which case, you can snoop around the built package at unpkg.com/browse/mithril/. Most READMEs worth a damn should tell you how to use their libraries without npm if possible. Unfortunately, a lot of library authors suck.

joshstrange 3y ago
> Unfortunately, a lot of library authors suck. The nerve of them not catering to the small percentage of use cases for a project they often do in their free time and often for free. The entitlement is real.
- toastercat 3y ago
  Sorry I forgot we're not allowed to criticize open-source maintainers ever. But as a library author myself, it takes less than 10 seconds to add such a section in my README.
lakpan 3y ago
Unpkg just serves the raw files, which may contain require() calls or import from other npm packages. That won’t work. The closest service is https://esm.sh https://esm.sh, but you can’t download from it.
- toastercat 3y ago
  Unpkg serves whatever is published to NPM, and if it's a library intended for the browser, that often includes minified versions ready for use in script tags, for example, https://unpkg.com/mithril@2.2.2/mithril.min.js https://unpkg.com/mithril@2.2.2/mithril.min.js. Sometimes the default export is CJS (which has require() calls), in which case, you can usually use the browse url that I mentioned to see if there's another export you can use. https://esm.sh/ https://esm.sh/ is definitely a good option too if you're OK with modules.
  - lakpan 3y ago
    Yeah but that's rarely the case, you can't offer that as a generic "solution" to the problem at hand. It's just Mithril's choice to both publish to npm and to officially link to unpkg. Packages can make different choices, like publishing to GitHub releases or just to include the file in the GitHub repo. The reality is that only frameworks and very popular browser-specific packages do that.
    - toastercat 3y ago
      I said "often", but you say "rarely", so I guess we'll just have to agree to disagree here. :)

MrJohz 3y ago

For that you probably want unpkg, there might be some other similar alternatives that you can look for if you want. They're essentially mirrors of NPM but they automatically bundle packages up and serve it via http like a normal web JS file. Some things still won't work because they rely on some server side library, like loading files or something, but you won't want those for web development anyway. You might also find that some libraries don't handle being included as a script very well, but you can instead use the import statement and that will probably work better - use <script type="module"> and inside that use import something from "<whatever the unpkg URL is>". For production usage this isn't ideal because you're not as in control of the code you're depending on, it's less reliable, and it's more requests than if you just bundled everything together, but not everything needs to be for production usage!

lakpan 3y ago

> Is there anything where I can search for browser only There used to be bower, thankfully that’s now gone. > JavaScript has improved a lot So has its ecosystem. Setting up parcel or Vite is straightforward and should get you out of those problems. The time when you could just download a .js file and stick it in your vendors folder is long long gone. Please bundle and minify your files before serving them.

mhagemeister 3y ago

I think you're looking for esm.sh . It transpiles both npm and jsr packages for the browser so that they can be used in a simple script tag.

silverwind 3y ago

`<script src="lib.js">` is legacy, you are supposed to `import` nowadays, like from unpkg.