nanon
This bundler aims to solve my personal UMD bundling. It makes it possible to transpile and bundle ES6/ES2017, React, and Preact with ease just by running one command.
Behind the scenes this wrapper uses Webpack and Google Closure Compiler.
Usage
$ npm i --save-dev nanon
Usage
$ nanon entrypoint.js output.bundle.js --name MyLibrary
$ # Or
$ nanon --input entrypoint.js --output output.bundle.js --name MyLibrary
Options
--input, -i Input ES6/ES2017 entrypoint
--output, -o Output bundle name
--name, -n Library name
--polyfill, -p Should polyfill ES2017 features
--watch, -w Turn on watch mode (webpack --watch)
Instead of using arguments within the CLI, nanon fetches config set in package.json
"nanon": ,
Example
Projects using nanon
$ nanon index.js output.bundle.js --name MyLibrary$ # Or if you've defined config in package.json $ nanon
Now you can import your code:
CommonJS
const MyLibrary = ;
RequireJS
;
Browser
// Available on the window object// window['MyLibrary']// window.MyLibraryMyLibrary;
Preact
Example creating UMD widgets with Preact (same applies for React):
// index.js; { super; thisstatetime = Date; } { thistimer = ; } { ; } { let time = statetime; return <span> time </span>; } module { ;}
$ nanon index.js index.min.js --name=MyClock
Now you can include the bundle and use the clock:
Missing
- Currently it bundles the react/preact framework. Will make this optional.
- Watch mode is buggy
- Development mode
Inspired by
Contribution
Contributions are appreciated.
License
MIT-licensed. See LICENSE.