什么是lyo，Node.js to browser - The easy way
Node.js to browser - The easy way
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 <g-emoji class=“g-emoji” alias=“sparkles” fallback-src=“https://github.githubassets.com/images/icons/emoji/unicode/2728.png”>✨</g-emoji> 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 src="my-module.min.js"></script> <script> myModule('foo'); </script>
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'
- Add a
.babelrcfile 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 <g-emoji class=“g-emoji” alias=“robot” fallback-src=“https://github.githubassets.com/images/icons/emoji/unicode/1f916.png”>🤖</g-emoji> 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
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
- If you provide options, they will be saved as default options
# Example with some random options $ lyo init -i lib/main.js -n runMyModule
Don’t forget to run
npm install after that
2. Add documentation
lyo usage (with options) to show an example code snippet. You can edit and include it in your
$ lyo usage > Edit and include the following snippet in your README.md
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.
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! <g-emoji class=“g-emoji” alias=“muscle” fallback-src=“https://github.githubassets.com/images/icons/emoji/unicode/1f4aa.png”>💪</g-emoji>
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@example.com --name Joi
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
MIT © Boris K