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

modrator

v1.2.1

Published

Tool functions to use ES6 modules as npm packages without transpiling

Downloads

6

Readme

ModRator

Use es6 modules from npm in webapps without transpiling.

Modrator is a tool class, to create a library out of the ES6 modules of node_modules to use them in web apps.

The problem

ES6 modules includes are always relative if the modules are not transpiled. So if you have a portion of the modules in /node_modules via npm and implement another portion under /src, the modules cannot link relatively.

The solution

Modrator solves the problem by copying the sources from node_modules to a web_modules folder, so that an include on external dependencies is always found under "../../web_modules", regardless of whether the code is in /src or /web_modules.

Usage

Modrator is mainly used in postinstall.js.

// Create an instance of `Modrator` in your `postinstall.js`:

const Modrator = require("modrator")
const modrator = new Modrator()

// Then add modules from packages

modrator.addToLibrary("npm-package-name-1")
modrator.addToLibrary("npm-package-name-2")
// [..]

The module sources will be copied from the node_modules to the lib folder for easy handling of the relative include path from es6 modules.

Examples

It works in these plain es6 module based apps, which must not be transpiled or compiled to run:

API

constructor

/**
 * Create the Modrator
 * @param projectRoot Your project root, mostly `__dirname`
 * @param props Configuration properties
 */
constructor(projectRoot = __dirname, props = {})

Default props

props = {
    nodeModulesPath: path.resolve(__dirname, '../../'), // path to `node_modules`
    libraryFolder: "lib", // library folder where the module sources are linked/copied to
    mode: "copy" // set to "symlink" to symlink sources instead of copying
}

addToLibrary

/**
 * Add the modules of a node package to the library
 * @param packageName Name of the nmp package
 * @param projectSourceRoot The source root inside the package folder
 * @param fileOrFolder The module source folder or file inside the 'projectSourceRoot'
 */
addToLibrary(packageName, projectSourceRoot = "src", fileOrFolder = packageName)