All Projects → bokub → Lyo

bokub / Lyo

Licence: mit
📦 Node.js to browser - The easy way

Programming Languages

javascript
184084 projects - #8 most used programming language
es5
17 projects

Projects that are alternatives of or similar to Lyo

Instapack
All-in-one TypeScript and Sass compiler for web applications! 📦 🚀
Stars: ✭ 131 (-79.01%)
Mutual labels:  minify, compiler, babel
Serverless Plugin Optimize
Bundle with Browserify, transpile and minify with Babel automatically to your NodeJS runtime compatible JavaScript
Stars: ✭ 122 (-80.45%)
Mutual labels:  browserify, minify, babel
win-svn
apache subversion windows builds with httpd modules and java hl
Stars: ✭ 19 (-96.96%)
Mutual labels:  build, module
metalsmith-babel
A Metalsmith plugin to compile JavaScript with Babel
Stars: ✭ 19 (-96.96%)
Mutual labels:  babel, build
Tinyify
a browserify plugin that runs various optimizations, so you don't have to install them all manually. makes your bundles tiny!
Stars: ✭ 392 (-37.18%)
Mutual labels:  browserify, minify
Shadow Rs
A build-time information stored in your rust project.(binary,lib,cdylib,dylib)
Stars: ✭ 117 (-81.25%)
Mutual labels:  build, compiler
Mhy
🧩 A zero-config, out-of-the-box, multi-purpose toolbox and development environment
Stars: ✭ 128 (-79.49%)
Mutual labels:  build, babel
Simple Get
Simplest way to make http get requests. Supports HTTPS, redirects, gzip/deflate, streams in < 100 lines
Stars: ✭ 357 (-42.79%)
Mutual labels:  browserify, browser
Babel Plugin Prismjs
A babel plugin to use PrismJS with standard bundlers.
Stars: ✭ 114 (-81.73%)
Mutual labels:  browserify, babel
Minify
✂️ An ES6+ aware minifier based on the Babel toolchain (beta)
Stars: ✭ 4,303 (+589.58%)
Mutual labels:  minify, babel
Clipboard Copy
Lightweight copy to clipboard for the web
Stars: ✭ 443 (-29.01%)
Mutual labels:  browserify, browser
Backpack
🎒 Backpack is a minimalistic build system for Node.js projects.
Stars: ✭ 4,466 (+615.71%)
Mutual labels:  build, babel
Magnet Uri
Parse a magnet URI and return an object of keys/values
Stars: ✭ 183 (-70.67%)
Mutual labels:  browserify, browser
Render Media
Intelligently render media files in the browser
Stars: ✭ 181 (-70.99%)
Mutual labels:  browserify, browser
Klap
zero config, zero dependency bundler for tiny javascript packages
Stars: ✭ 143 (-77.08%)
Mutual labels:  build, babel
React Modern Library Boilerplate
Boilerplate for publishing modern React modules with Rollup
Stars: ✭ 285 (-54.33%)
Mutual labels:  babel, module
Yt Player
Simple, robust, blazing-fast YouTube Player API
Stars: ✭ 576 (-7.69%)
Mutual labels:  browserify, browser
Buffer
The buffer module from node.js, for the browser.
Stars: ✭ 1,178 (+88.78%)
Mutual labels:  browserify, browser
String To Stream
Convert a string into a stream (streams2)
Stars: ✭ 75 (-87.98%)
Mutual labels:  browserify, browser
Drag Drop
HTML5 drag & drop for humans
Stars: ✭ 443 (-29.01%)
Mutual labels:  browserify, browser

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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].