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

lyo

v1.2.0

Published

Node.js to browser - The easy way

Downloads

71

Readme

Lyo

Node.js to browser - The easy way

Npm version Build status Code coverage XO code style

Lyo is the easiest way to transform Node.js modules into browser-compatible libraries.

No decision-making, no configuration needed, it just works!

Lyo uses Browserify, Babel, UglifyJS, and a pinch of magic ✨ so you don't have to worry about configuration

Install & Run

# Install globally
npm i -g lyo

# Run (on your own module)
lyo

# Run (on any npm module)
lyo get <module>

Lyo will create a single .min.js file that you can import in a <script> tag

<script src="my-module.min.js"></script>
<script>
  myModule('foo');
</script>

Options

Lyo is supposed to work right away, but you can force things with some options if needed.

$ lyo --help

    Usage
      $ lyo [options]               Run Lyo
      $ lyo init [options]          Add Lyo to your project
      $ lyo usage [options]         Show how to use the output file
      $ lyo get <module> [options]  Run Lyo on a module from npm

    Options
      --input   -i  Entry file
      --output  -o  Output file / folder
      --name    -n  Module name in browser
      --banner  -b  Add a banner to the top of the bundle

    Examples
      $ lyo
      $ lyo -i main.js
      $ lyo -n runFunction
      $ lyo get query-string
      $ lyo -o dist/bundle.min.js
      $ lyo -b 'Lyo\nLicensed under MIT'

Tips

  • Add a .babelrc file at the root of your project to configure the Babel compilation step
  • The bundle is supposed to run in browsers. A bundle used in a Node.js program will probably be slower than the original module
  • Don't blame Lyo if it fails to compile your code. The error could come from Browserify, Babel or UglifyJS
  • If you like Lyo, you will love lyo.now.sh, an automated bot 🤖 running Lyo on npm modules of your choice

Using Lyo on your own module

Once you've tried Lyo on your module and figured the best options to use, you should consider the following steps

1. Add Lyo to your project

Run lyo init (with options) to edit your package.json as follows:

  • Lyo will be added to the dev dependencies
  • A pre-publish script will be created (or edited) so Lyo is triggered before every npm publish
  • If you provide options, they will be saved as default options
# Example with some random options
$ lyo init -i lib/main.js -n runMyModule

package.json

Don't forget to run npm install after that

2. Add documentation

Run lyo usage (with options) to show an example code snippet. You can edit and include it in your README.md.

$ lyo usage

> Edit and include the following snippet in your README.md

HTML example

3. Commit and publish

Lyo will output a single file called a bundle, by default in a dist folder. You can choose to commit it, or not. It's really up to you.

Run npm publish, Lyo will compile your module, and the bundle will be pushed to the npm registry with the rest of your module. Congratulations, you're done! 💪

Using Lyo on someone else's module

Sometimes, you stumble upon a npm module without a browser-compatible version.

No worries, just run lyo get <module> to download and compile it right away ⚡

# Compile query-string (npmjs.com/package/query-string)
$ lyo get query-string

# Compile a specific version of Joi (npmjs.com/package/joi)
$ lyo get [email protected] --name Joi

FAQ

What if I need unsupported features?

If you need features unsupported by Lyo (sourcemaps, code splitting...), your best option is not using Lyo, which is nothing more than an all-in-one package, with automatic configuration.

However, if you think Lyo should support this feature, feel free to create a new issue!

Why Lyo when there are thousands of better tools doing the same thing?

Lyo's philosophy is highly inspired from XO, a linter that works immediately, without any configuration. XO is just an ESLint wrapper, but it saves you the hassle of choosing ESLint rules, adding them to a new .eslintrc file, installing plugins...

I use XO for almost all my projects, but I could not find any tool as simple as XO for Node.js > browser compilation. That's why I created Lyo

What does Lyo mean?

Lyo is short for lyophilization, a process that transforms food into a dry and compact form

License

MIT © Boris K