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

moduleserve

v0.9.1

Published

Serve and transpile CommonJS modules over HTTP

Downloads

601

Readme

Moduleserve

This is a shim HTTP server for directly running your CommonJS (or ES6) modules for development and testing (without a bundling step, and with the compilation/transformation integrated in the server shim).

Warnings:

  • The server basically exposes your whole filesystem over HTTP. It binds to "localhost" by default, but if you bind it to something else or proxy in some uncautious way, you are putting yourself at risk.

  • This does everything syncronously, both on client and server.

  • This is a hack that I am using for my own development, not generally-useful, supported software. You might be able to make use of it, but if you run into a problem, you should try to debug it yourself, not ask me for help.

  • The code is likely to break if you do something that I'm not doing. Pull requests welcome!

What it does

You run the server for a given directory...

moduleserve demo/ --port 8080

It will start up an HTTP server on the given port, serving the content of the demo directory statically. In addition, it exposes a URL /moduleserve/load.js, which you use to load your main module:

<script src="/moduleserve/load.js" data-module="./mymodule"></script>

That will pull in the client-side scaffolding and look for ./mymodule, resolved relative to the directory that the server is running on. You can add a data-require attribute to the tag to have it set a global require variable, which you can use to load modules from the console.

That module is loaded as a CommonJS module, and may use require with the regular node.js conventions (implicit .js or /index.js, searching node_modules, etc). The intention is that, contrary to systems like JSPM, you don't have to set up your project to please this tool, but you can just directly use it on an npm-style codebase.

You can pass moduleserve a --transform option, which should point at a node module that defines a transformer. Such a transformer is called on a file before it is served. It should export a transform function that takes (filename, text) parameter and returns the transformed text. If it also exports an init function, that is called once with the target directory of the server.

If you pass --transform babel, you get a built-in transformer that loads babel in the context of the target directory (i.e. you have to have it installed locally there, or globally) that you're running the tool on, and uses it to transform any files whose path does not contain node_modules/.

If you pass --spa, every file path where no file can be found automatically will fall back to serving the index.html. This option allows you to implement routing for Single Page Applications.

The client is going to make a request for every single module file, so for a bigger project the initial load is bound to be slow, especially if you're using an expensive transform. The server then caches these and sends 302 responses whenever possible, so assuming localhost-level latency, subsequent loads should be faster.

Source

This code is open-source under an MIT license. If you want to contribute, create pull requests on GitHub.