babel-standalone travis-ci gulp npm

Standalone build of Babel for use in non-Node.js environments, including browsers. Similar to the (now deprecated) babel-browser.

3 years after

babel-standalone

babel-standalone is a standalone build of Babel for use in non-Node.js environments, including browsers. It's bundled with all the standard Babel plugins and presets, and a build of babili (babel-minify) is optionally available too.

But why?!

It's true that using Babel through Webpack, Browserify or Gulp should be sufficient for most use cases. However, there are some valid use cases for babel-standalone:

  • Sites like JSFiddle, JS Bin, the REPL on the Babel site, etc. These sites compile user-provided JavaScript in real-time.
  • Apps that embed a JavaScript engine such as V8 directly, and want to use Babel for compilation

Installation

There are several ways to get a copy of babel-standalone. Pick whichever one you like:

Usage

Load babel.js or babel.min.js in your environment. This will expose Babel's API in a Babel object:

var input = 'const getMessage = () => "Hello World";';
var output = Babel.transform(input, { presets: ['es2015'] }).code;

When loaded in a browser, babel-standalone will automatically compile and execute all script tags with type text/babel or text/jsx:

<div id="output"></div>
<!-- Load Babel -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.14.0/babel.min.js"></script>
<!-- Your custom script here -->
<script type="text/babel">
const getMessage = () => "Hello World";
document.getElementById('output').innerHTML = getMessage();
</script>

You can use the data-plugins and data-presets attributes to specify the Babel plugins/presets to use:

<script type="text/babel" data-presets="es2015,stage2">

Loading external scripts via src attribute is supported too:

<script type="text/babel" src="foo.js"></script>

Note that .babelrc doesn't work in babel-standalone, as no file system access is available. The presets and/or plugins to use must be specified in the options passed to Babel.transform.

Related Repositories

babel

babel

:tropical_fish: Babel is a compiler for writing next generation JavaScript. ...

babili

babili

:scissors: An ES6+ aware minifier based on the Babel toolchain (beta) ...

babel-plugin-webpack-loaders

babel-plugin-webpack-loaders

babel 6 plugin which allows to use webpack loaders ...

babel-service

babel-service

On demand targeted transpiling inside the browser's ServiceWorker ...

rollup-plugin-babel

rollup-plugin-babel

Seamless integration between Rollup and Babel ...


Top Contributors

Daniel15 greenkeeperio-bot DanBuild mweststrate hzoo Kovensky taion jopecko ngyikp tpetricek ssergiienko

Releases

-   release-6.17.0 zip tar
-   release-6.15.0 zip tar
-   release-6.14.0 zip tar
-   release-6.13.2 zip tar
-   release-6.12.0 zip tar
-   release-6.10.3 zip tar
-   release-6.7.7 zip tar
-   release-6.7.4 zip tar
-   release-6.4.4 zip tar
-   release-1.0.0 zip tar