npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

unquire

v1.0.1

Published

A simple require() polyfill to use in browser demos

Downloads

3

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

chalkerchalker

Keywords

Readme

unquire

This is a very simple require() polyfill for browsers that loads packages from https://unpkg.com/.

It supports simple packages only and doesn't work for generic ones — the main intention was to be able to launch up-to-date library demo sites on GitHub Pages without having to re-build the bundle after every update.

How does it work?

First, it statically analyzes the code for require presence and recursively loads the require-d files from https://unpkg.com/, asynchronously.

Then, it dynamically evaluates modules code, providing a synchronous require() implementation using the pre-loaded files.

If some deps names are computed dynamically — those are loaded synchronously at the dynamic evaluation step. Dynamic evaluation does not support loading new packages, only files with full or relative paths.

Caveats

  • Most of Node.js API is not supported (some could be loaded from ecosystem).
  • Dynamic require() arguments are supported only partially.
  • Only latest versions of packages are loaded by default.
  • This loads packages from a thirdparty CDN.
  • css files are not loaded, you have to specify them manually.

Not recommended to use this in production — the main intention of this package is make building GitHub Pages demo sites easier, without having to bundle stuff.

How to use?

Most simple setup:

…
  <script defer src="https://unpkg.com/unqire@1"></script>
</head>
<body data-require-main="./main.js">
…

The libary registers a single global require function, so, alternatively, require.async('./main.js') could be used (returns a Promise).

require('./main.js') also works, but without preloading it would try to load the deps synchronously (which doesn't support loading packages by their names). You should avoid doing that from your top-level code.

The above affects only the entry point — inside ./main.js (and other require()-d code), use synchronous require() as usual — file loads will be done asynchronously.

Also, you can specify a specific version or version range when loading a package, e.g. require('codemirror@5').