highly opinionated dev environment [Proof of concept]
MIT License
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 npm@2 or higher, and install globally:
npm install -g prot
Create a folder and cd
into it, then run prot
.
mkdir cool-prototype
cd cool-prototype
prot 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:
import { parse } from 'url'
console.log(parse(window.location.href))
Saving the 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 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 --install
or -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.
prot --install
Also see:
You can also enable babel-preset-react
with -r
or --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(
<h1>Hello, world!</h1>,
document.body
)
It should auto-install and save react
and react-dom
because of the --install
flag.
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 --build
or -b
flag.
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-polyfill
by default, react with a flagindex.js
and package.json
loose-envify
, uglifyify
and bundle-collapser
for smaller builds and dead code eliminationpackage.json
and all that jazz?MIT, see LICENSE.md for details.