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

use-m

v8.10.17

Published

use-m: dynamically import any JavaScript module

Downloads

9,912

Readme

npm License

use-m: dynamically load and import any JavaScript module

use-m (m stands for module) is a utility for dynamically importing any JavaScript module (npm package) at runtime.

It may be useful for standalone scripts that do not require a package.json. Also it may make your code portable across environments (for example it may require no changes in your code when executed in CommonJS, ES Modules and browser). You can ensure predictable behavior of your code over time by specifying the exact version to import directly in your script, similar to how versions are specified in package.json. You even can import multiple versions of the same library at the same time. You can use use-m when you don't want your package.json to be poluted with optional packages. You may keep your package.json with as little dependencies as needed thanks to use-m.

Table of Contents

Key features

  • Dynamic package loading: In node.js, use-m loads and imports npm packages on-demand with global installation (using npm i -g with separate alias for each version), making them available across projects and reusable without needing to reinstall each time. In case of a browser use-m loads npm packages directly from CDNs (by default esm.sh is used).
  • Version-safe imports: Allows multiple versions of the same library to coexist without conflicts, so you can specify any version for each import (usage) without affecting other scripts or other usages (imports) in the same script.

Usage

Universal

Works in CommonJS, ES Modules and browser environments.

fetch('https://unpkg.com/use-m/use.js')
  .then(async useJs => {
    const { use } = eval(await useJs.text());
    const _ = await use('[email protected]');
    console.log(`_.add(1, 2) = ${_.add(1, 2)}`);
  });

Universal execution comes at cost of eval usage, that is considered potential security threat. In case of this library only single file is evaled, it short, unminified and has no dependencies, so you can check the contents yourself. Once you have use function instance no more eval function will be executed by this library. If you don't want to use eval you can use await import() in browser or in node.js. In node.js you can also just install the package from npm as usual.

Browser

If you don't want to use eval in the browser, you can import use-m like this:

const { use } = await import("https://esm.sh/use-m");
const _ = await use('[email protected]');
console.log(`_.add(1, 2) = ${_.add(1, 2)}`);

Only 2 lines and now have an interactive playground for JavaScript and almost any NPM library directly in your browser's console. No more cloud based sandboxes required. Sorry VSCode, you don't have such super powers yet.

Network imports

It is possible to use --experimental-network-imports to enable the same style of imports as in browser version. See the example.

  1. Create file named example.mjs:

    const { use } = await import('https://unpkg.com/use-m/use.mjs');
    const _ = await use('[email protected]');
    console.log(`_.add(1, 2) = ${_.add(1, 2)}`);
  2. Execute the script using --experimental-network-imports option:

    node --experimental-network-imports example.mjs

Independent Scripts

If you need to use use-m without adding it to a project locally, you can load it directly from unpkg using fetch. This is particularly useful in environments like zx or in other standalone scripts like execa, when you don't want to use any package.json, node_modules, etc.

use-m and zx

  1. Install zx globally

    npm install -g zx
  2. Create a file named example.mjs:

    #!/usr/bin/env zx --verbose
       
    const { use } = eval(
      await fetch('https://unpkg.com/use-m/use.js').then(u => u.text())
    );
        
    const _ = await use('lodash@latest');
       
    const { stdout } = await $`ls`.pipe`grep js`;
    const files = _.filter(
      _.split(stdout, '\n'),
      (item) => !_.isEmpty(item)
    );
    console.log(files);
  3. Give execution permissions

    chmod +x example.mjs
  4. Execute:

    ./example.mjs

use-m and execa

  1. Create a file named example.mjs:

    const { use } = eval(
      await fetch('https://unpkg.com/use-m/use.js').then(u => u.text())
    ); 
       
    const _ = await use('lodash');
    const { $: $$ } = await use('execa');
    const $ = $$({ verbose: 'full' }); 
       
    const { stdout } = await $`ls`.pipe`grep js`;
    const files = _.filter(
      _.split(stdout, '\n'),
      (item) => !_.isEmpty(item)
    );
    console.log(files);

Note: in ES Module environments where __filename and require are not defined, you may need to add meta option into use function constructor, as it is not possible to access import.meta inside eval.

  1. Execute:

    node example.mjs

Standard Import

You can still install and import use-m in node.js as usual. For example if you don't want to use eval in node.js.

Installation

Add use-m to your project with Yarn:

yarn add use-m

Or NPM:

npm i use-m

Load use-m to dynamically import the lodash package from npm:

CommonJS

const { use } = require('use-m');

(async () => {
  const _ = await use('[email protected]');
  console.log(`_.add(1, 2) = ${_.add(1, 2)}`);
})();

or

import('use-m')
  .then(async ({ use }) => {
    const _ = await use('[email protected]');
    console.log(`_.add(1, 2) = ${_.add(1, 2)}`);
  });

ES Modules

import { use } from 'use-m';

const _ = await use('[email protected]');
console.log(`_.add(1, 2) = ${_.add(1, 2)}`);

or

const { use } = await import('use-m');

const _ = await use('[email protected]');
console.log(`_.add(1, 2) = ${_.add(1, 2)}`);

Examples

You can check out usage examples source code. You can also explore our tests to get even more examples.

Questions and issues

If you have any questions or issues, please write us on GitHub. Together we can ensure this package will have highest quality possible. Your feedback is valuable and helps improve the project.

Contributing

We welcome contributions! To contribute please open Pull Request with any suggested changes.

License

This project is licensed under the Unlicense (public domain). That means you are absolutely free to use this library, there is no conditions or limitations on how this library and its code can be used.