- Notifications
You must be signed in to change notification settings - Fork4
A simplified Browserify and Watchify CLI
License
JS-DevTools/simplifyify
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
I constantly find myself using the same Browserify plug-ins and transforms on every project, and I always end up writing pretty much the same Gulp script over and over again. Simplifyify is the solution to that problem.
- Supportsglobs, even on Windows
- Supports Browserifytransforms andplugins, such as Babel, CoffeeScript, TypeScript, etc.
- Built-in support for TypeScript. Enabled automatically if the entry file has a
.tsor.tsxextension - Has a programmaticAPI, for use with build tools like Grunt, Gulp, Broccoli, etc.
- Bundle everything into one big file, or create different bundles for each part of your app (seeexamples below)
- Add a banner with version, date, license, etc. viabrowserify-banner
- One command creates all the files you need:
--bundlebundles your code and nothing else. Useful during development--debugcreatesexternal source-maps (.map) usingexorcist--minifyshrinks your code usinguglifyifyandUglify-ES--coverageadds code-coverage instrumentation usingistanbul--watchuseswatchify forfast differential re-builds as files change
globify
Run browserify and watchify with globs - even on Windowssourcemapify
Sourcemap plugin for Browserifybrowserify-banner
Add a comment (and/or code) to the top of your Browserify bundle
Install usingnpm:
npm install @jsdevtools/simplifyify
Usage: simplifyify [options] <source-files...>Options: -b, --bundle Create a non-minified bundle (*.js) for each source file. This is the default if no other output option is set. -m, --minify Create a minified bundle (*.min.js) for each source file. -c, --coverage Create a bundle with code-coverage instrumentation (*.coverage.js) for each source file. -d, --debug Create a source map (*.js.map) for each bundle -w, --watch Watch source file(s) and rebuild the bundle(s) automatically -o, --outfile <filespec> The output file or directory. May include a filename pattern (e.g. "*.bundle.js") -x, --exclude <filespec> File path or glob pattern to exclude. Don't forget to put quotes around glob patterns -s, --standalone <name> Export as a named UMD bundle (e.g. "my.cool.module") May include a wildcard (e.g. "MyLib.*")Arguments: <source-files...> One or more file paths and/or glob patterns. Don't forget to put quotes around glob patterns. A separate Browserify bundle will be created for each source file.In the simplest usage, you can use Simplifyify to bundle all of your code into a single file:
simplifyify src/index.jssrc/index.js --> src/index.bundle.js# <-- unminified code
By default, the output file is at the same path as the entry file, but with a.bundle.js extension. You can customize this using the--outfile argument:
simplifyify src/index.js --outfile dist/my-package.jssrc/index.js --> dist/my-package.js# <-- unminified code
If you want the bundled code to be minified, then add the--minify flag:
simplifyify src/index.js --outfile dist/my-package.js --minifysrc/index.js --> dist/my-package.js# <-- minified code
What if you also want a source map (.map) file? Just add the--debug flag.
simplifyify src/index.js --outfile dist/my-package.js --minify --debugsrc/index.js --> dist/my-package.js# <-- minified codesrc/index.js --> dist/my-package.js.map# <-- source map
Simplifyify can output multiple bundles of your code in a single command. Let's say you want to create an unminified bundle for development (with a source map), a minified bundle for production (with a source map), and a test bundle (with code-coverage instrumentation) for testing:
simplifyify src/index.js --outfile dist/my-package.js --bundle --debug --minify --coveragesrc/index.js --> dist/my-package.js# <-- unminified codesrc/index.js --> dist/my-package.js.map# <-- source mapsrc/index.js --> dist/my-package.min.js# <-- minified codesrc/index.js --> dist/my-package.min.js.map# <-- source mapsrc/index.js --> dist/my-package.coverage.js# <-- code-coverage
In many applications, it doesn't make sense forall of your code to be bundled into one huge file. Maybe you want to create separate bundles for each folder, or for each component or section of your app. Simplifyify makes this easy. It will create separate bundles for each entry file that you specify. For example:
simplifyify src/store.js src/cart.js src/checkout.js --outfile dist --bundle --minify --debugsrc/store.js --> dist/store.js# <-- unminified codesrc/store.js --> dist/store.js.map# <-- source mapsrc/store.js --> dist/store.min.js# <-- minified codesrc/store.js --> dist/store.min.js.map# <-- source mapsrc/cart.js --> dist/cart.js# <-- unminified codesrc/cart.js --> dist/cart.js.map# <-- source mapsrc/cart.js --> dist/cart.min.js# <-- minified codesrc/cart.js --> dist/cart.min.js.map# <-- source mapsrc/checkout.js --> dist/checkout.js# <-- unminified codesrc/checkout.js --> dist/checkout.js.map# <-- source mapsrc/checkout.js --> dist/checkout.min.js# <-- minified codesrc/checkout.js --> dist/checkout.min.js.map# <-- source map
Specifying each entry file can quickly become cumbersome though. That's whereglobs come in. You can specify one or more globs, and Simplifyify will create a separate bundle for each file that matches the glob pattern. For example:
simplifyify"src/*/index.js" --outfile"dist/*.bundle.js" --bundle --minify --debugsrc/store/index.js --> dist/store/index.bundle.js# <-- unminified codesrc/store/index.js --> dist/store/index.bundle.js.map# <-- source mapsrc/store/index.js --> dist/store/index.bundle.min.js# <-- minified codesrc/store/index.js --> dist/store/index.bundle.min.js.map# <-- source mapsrc/cart/index.js --> dist/cart/index.bundle.js# <-- unminified codesrc/cart/index.js --> dist/cart/index.bundle.js.map# <-- source mapsrc/cart/index.js --> dist/cart/index.bundle.min.js# <-- minified codesrc/cart/index.js --> dist/cart/index.bundle.min.js.map# <-- source mapsrc/checkout/index.js --> dist/checkout/index.bundle.js# <-- unminified codesrc/checkout/index.js --> dist/checkout/index.bundle.js.map# <-- source mapsrc/checkout/index.js --> dist/checkout/index.bundle.min.js# <-- minified codesrc/checkout/index.js --> dist/checkout/index.bundle.min.js.map# <-- source map
TIP: Don't forget to put quotes around your glob patterns! Otherwise, some shells (e.g. Bash) will try to expand them themselves, which may or may not work
Simplifyify honors thebrowserify.transform field in yourpackage.json file. For example, the following configuration usesBabelify to transform your ES6 code to ES5:
{"name":"my-package","version":"1.2.3","browserify": {"transform": ["babelify"] },"devDependencies": {"babelify":"^10.0.0" }}You can also specify options for your transforms. The exact options depend on the transform you're using. Here's an example that configuresBabelify and also modifies Simplifyify's default config foruglifyify:
{"name":"my-package","version":"1.2.3","browserify": {"transform": [ ["babelify", {"presets": ["@babel/preset-env"] }], ["uglifyify", {"mangle":true,"compress": {"sequences":true,"dead_code":true,"booleans":true,"conditionals":true,"if_return":false,"drop_console":false,"keep_fnames":true },"output": {"comments":false } }] ] },"devDependencies": {"@babel/preset-env":"^7.0.0","babelify":"^10.0.0" }}The same technique described above for Browserify transforms also works for Browserify plugins. Just add abrowserify.plugins field to yourpackage.json file. For example, the following configuration configuresTSify to transpile your TypeScript code, andbrowserify-banner to add a banner comment to the top of your output file(s).
{"name":"my-package","version":"1.2.3","browserify": {"plugins": [ ["browserify-banner", {"template":"<%= pkg.name %> v<%= pkg.version %>" }], ["tsify", {"target":"esnext","module":"commonjs","moduleResolution":"node","jsx":"react" }] ] },"devDependencies": {"typescript":"^3.0.3" }}Simplifyify also has a programmatic API, so you can use it directly in your build scripts (Gulp, Grunt, Broccoli, etc.)
Here's the API definition, andhere's a full example. Just pass an array of strings (file paths and/or glob patterns) and an options param. You get back anEventEmitter, which fires all the Browserify & Watchify events.
varsimplifyify=require("@jsdevtools/simplifyify");gulp.task("browserify",function(done){simplifyify("lib/*.module.js",{outfile:"dist/*.bundle.js",debug:true,minify:true}).on("end",function(){// Finished successfully!done();}).on("error",function(err){// Something went wrongdone(err);});});
Contributions, enhancements, and bug-fixes are welcome!Open an issue on GitHub andsubmit a pull request.
To build the project locally on your computer:
Clone this repo
git clone https://github.com/JS-DevTools/simplifyify.gitInstall dependencies
npm installRun the tests
npm test
Simplifyify is 100% free and open-source, under theMIT license. Use it however you want.
This package isTreeware. If you use it in production, then we ask that youbuy the world a tree to thank us for our work. By contributing to the Treeware forest you’ll be creating employment for local families and restoring wildlife habitats.
Thanks to these awesome companies for their support of Open Source developers ❤
About
A simplified Browserify and Watchify CLI
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
Uh oh!
There was an error while loading.Please reload this page.
Contributors3
Uh oh!
There was an error while loading.Please reload this page.