highly opinionated dev environment
A ridiculously opinionated dev environment for insanely fast rapid prototyping.
This is a proof-of-concept and a response to @Vjeux's challenge to create a system for rapid prototyping. I will not be actively maintaining this module. See run-js for a more active project in a similar vein.
Make sure you have npm@2 or higher, and install globally:
npm install -g prot
Create a folder and
cd into it, then run
mkdir cool-prototypecd cool-prototypeprot index.js --open
This will create an empty
index.js file in the current folder, stub
package.json (if it doesn't exist), run a server at
localhost:9966, and launch the URL in your default browser.
Now you can hack around with
index.js. Try adding the following:
index.js file will trigger a LiveReload. It includes ES2015 and
babel-polyfill by default, and supports npm/Node dependencies through browserify.
If you don't specify anything, it will default to
# same as `prot index.js`prot
You can specify an optional CSS file like so:
prot index.js --css main.css
The CSS will be LiveReloaded without refreshing the browser, and without losing any application state.
(this feature is still experimental)
You can pass
-i, which will auto-install npm dependencies on file save, and add them to your package.json. This means you can hack without typing
npm install react --save and so forth.
You can also enable
prot --react --install
After running the above command, try pasting the following and reloading the browser.
It should auto-install and save
react-dom because of the
At some point you will want to deliver this through DropBox, FTP, gh-pages, or whatever. The easiest way to do that is by bundling it as a single HTML file.
Use the same arguments as before, but include the
prot -b index.html
The above command will bundle a compressed
index.js into a script tag inside
index.html. The HTML is now self-contained. If
--css is specified, it will be compressed and inlined into a style tag.
The build will set NODE_ENV to
'production' for smaller bundles.
See here for an example of the build output:
babel-polyfillby default, react with a flag
bundle-collapserfor smaller builds and dead code elimination
package.jsonand all that jazz?
MIT, see LICENSE.md for details.