highly opinionated dev environment [Proof of concept]
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.
For a more flexible workflow with minimal boilerplate, check out my post Rapid Prototyping in JavaScript.
Make sure you have [email protected] or higher, and install globally:
npm install -g prot
Create a folder and
cdinto it, then run
prot.
mkdir cool-prototype cd cool-prototype prot index.js --open
This will create an empty
index.jsfile 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:
import { parse } from 'url' console.log(parse(window.location.href))
Saving the
index.jsfile will trigger a LiveReload. It includes ES2015 and
babel-polyfillby default, and supports npm/Node dependencies through browserify.
If you don't specify anything, it will default to
index.js:
# 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
--installor
-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 --saveand so forth.
prot --install
Also see:
You can also enable
babel-preset-reactwith
-ror
--react:
prot --react --install
After running the above command, try pasting the following and reloading the browser.
// index.js import React from 'react' import ReactDOM from 'react-dom'ReactDOM.render(
Hello, world!
, document.body )
It should auto-install and save
reactand
react-dombecause of the
--installflag.
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
--buildor
-bflag.
prot -b index.html
The above command will bundle a compressed
index.jsinto a script tag inside
index.html. The HTML is now self-contained. If
--cssis 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
index.jsand
package.json
loose-envify,
uglifyifyand
bundle-collapserfor smaller builds and dead code elimination
package.jsonand all that jazz?
MIT, see LICENSE.md for details.