babelOptions

  • typedef
config.babelOptions {Object}  

Babel 6 is the default JavaScript compiler in StealJS. Babel provides some options for transpiling JavaScript code. Available options can be found in Babel’s documentation.

Object

Properties

  1. presets {Array<String>}

    An array of preset paths.

    Steal uses the following babel presets by default:

    • es2015-no-commonjs
    • react
    • stage-0

    Additional presets can be added to your package.json like:

    "steal": {
    "babelOptions": {
        "presets": ["stage-3"]
    }
}

    Any presets defined in the package.json will be used along the default ones.

    Presets can be defined in several ways, including using their npm package name, or a relative path to where the plugin function is defined. When relative paths are used, StealJS locates them relative to where the package.json file is found. Check the Babel docs to learn more about the different ways to define presets paths.

  2. plugins {Array<String>}

    An array of plugin paths

    StealJS uses the following babel plugin by default

    • transform-es2015-modules-systemjs

    Additional plugins can be added to your package.json like:

    "steal": {
    "babelOptions": {
        "plugins": ["transform-decorators-legacy"]
    }
}

    Same as presets, plugins can be defined in several ways and can be passed options, please refer to the Babel docs to get familiar with the syntax.

    StealJS uses babel-standalone internally, any plugin or preset builtin in babel-standalone will work after being declared in the babelOptions object; non-buitin plugins and presets need to be installed through npm first.

  3. env {Object}

    An object with plugins and presets to be used in certain environments

    "steal": {
    "babelOptions": {
        "env": {
            "test": {
                "plugins": ["transform-decorators-legacy"]
            }   
        }
    }
}

    StealJS will collect the plugins/presets defined in the babel env option and will use them in the specified environment. StealJS checks the same environment variables used by babel, and if none of those variables are avaiable it will default to the Steal env value.

JSX

JSX is supported by default with the Babel 6 compiler, so you can use it directly in your code:

var hw = <div>Hello <strong>world!</strong></div>;

If you would like to import a .jsx template to your app like this:

import renderer from "my-jsx-template.jsx";

…have a look at the steal-react-jsx plugin.

Generators

In order to use Generators, you must include the Babel polyfill

First install the package and save it to your package.json with:

npm install --save-dev babel-polyfill

Then, to configure StealJS to load the correct package, add the following to your package.json:

"steal": {
    ...
    "map": {
        "babel-polyfill": "babel-polyfill/dist/polyfill"
    },
    "meta": {
        "babel-polyfill/dist/polyfill": {
            "format": "cjs"
        }
    }
}

That's it! Check a working example in the steal-generators-example repository.

Help us improve StealJS by taking our community survey