A one stop solution for working with ES6, React and TypeScript.

Spire of Babel is a zero-config tool takes the guesswork out of setting up a project written in ES6, React and TypeScript. In addition to converting ES6 with Babel, Spire of Babel also comes with a bundler for using both require('') and import styled module loaders, and auto-generated sourcemaps.

Installation

$ npm install spire-of-babel -g

Usage

Usage: spire-of-babel <path> [options]

Options:

 -h, --help         Display this help message.
 -v, --version      Display the current installed version.
 -b, --bundle       Use browserify bundler.
 -s, --sourcemap    Generate inline sourcemap.

CLI

Transpile ES6 to ES5

$ spire-of-babel es6.js > es5.js

Bundle

$ spire-of-babel ./src/js/app.js --bundle > ./static/js/bundle.js

NPM Scripts

This is an example build process using NPM scripts. Running npm run build will transpile the src/js/app.jsx file and output the contents to static/js/bundle.min.js.

{
    "dependencies": {
        "babel-preset-env": "1.7.0",
        "babel-preset-stage-2": "6.24.1",
        "prop-types": "15.7.2",
        "react": "16.13.1",
        "react-dom": "16.13.1"
    },
    "devDependencies": {
        "spire-of-babel": "2.0.0",
        "uglify-js": "3.10.3"
    },
    "scripts": {
        "build": "spire-of-babel ./src/js/app.jsx --bundle | uglifyjs > ./static/js/bundle.min.js"
    }
}

Babel Plugins via .babelrc

Spire of Babel works in the same way that Babel would in that it will use a .babelrc file located within your project for additional configuration.

To add plugins not already included in Spire of Babel, add them to a .babelrc file located in the root of your project.

.babelrc

{
    "plugins": ["transform-async-generator-functions"]
}

See https://babeljs.io/docs/plugins/transform-async-generator-functions/ for more information about the above example.

API

const spire = require('spire-of-babel');

spire
    .transformFile('react.jsx', {
        bundle: true
    })
    .then(({ code }) => process.stdout.write(code));

Documentation

View full documentation here.