📦 ES.next in a box
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
fixture
src
.editorconfig
.eslintignore
.eslintrc.yml
.gitignore
.travis.yml
LICENSE
README.md
appveyor.yml
demo.gif
package.json

README.md

📦 ESBox

NPM version Linux Build Status Windows Build Status Dependency Status

ES.next in a box™

Zero-config REPL for experimenting with next-generation JavaScript.

It automatically compiles and re-runs your script every time you save. Think of it as a JSBin-like setup for your local editor and terminal – with full access to Node APIs and modules.

demo-gif

As well as for experimenting, ESBox may be useful in situations like workshops and screencasts – it makes it easy to do live code demos in ES2016 and beyond, without getting bogged down in build systems.

Install

> npm install -g esbox

Usage

To run script.js in a box:

> esbox script.js

Every time you save the file, ESBox clears the terminal display and runs your script again. Any uncaught errors get pretty-printed for easy debugging.

For more options, see esbox --help.

Automatic Babel compilation

You can use any proposed ECMAScript features that Babel supports (stage-0 and above), including async/await, destructuring, rest/spread, etc.

Magic imports

You can import a number of popular npm packages without needing to install them first.

This includes lodash, bluebird, chalk, chai, express, request – and anything else listed under dependencies in ESBox's own package.json.

This is made possible by rewiring require() to use ESBox's own node_modules folder as an extra possible module source. (Locally installed modules relative to your script still take precedence if found.)

For example, a script like this just works in ESBox:

import cheerio from 'cheerio';
import fetch from 'isomorphic-fetch';
import { cyan } from 'chalk';

(async () => {
  const result = await fetch('https://www.nytimes.com');
  console.assert(result.ok);

  const $ = cheerio.load(await result.text());

  console.log('The New York Times headlines:');

  $('.story-heading').each((i, element) => {
    console.log(' ', cyan($(element).text().trim()));
  });
})();

Advanced: custom Babel config

By default, ESBox will use a Babel config that makes all stage-0+ features work. But ideally you could also bring your own config. Currently, Babel has a bug that means it won't respect .babelrc files. Until that's fixed, you can instruct ESBox to use a .babelrc file located next to your script, like this:

> esbox script.js --babelrc

Or you can specify a directory to look for a .babelrc file in, like this:

> esbox script.js --babelrc /path/to/dir

This feature is a stopgap to work around a Babel issue. It might only affect your entry file. It will probably be removed in future and .babelrc files will just work.


License

MIT © Callum Locke