@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
- Apps that want to use JavaScript as a scripting language for extending the app itself, including all the goodies that ES2015 provides.
- Integration of Babel into a non-Node.js environment (ReactJS.NET, ruby-babel-transpiler, php-babel-transpiler, etc).
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>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<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,stage-2">
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
.
Customisation
Custom plugins and presets can be added using the registerPlugin
and registerPreset
methods respectively:
function lolizer() {
return {
visitor: {
Identifier(path) {
path.node.name = 'LOL';
}
}
}
}
Babel.registerPlugin('lolizer', lolizer);
Once registered, just use the name of the plugin:
var output = Babel.transform(
'function helloWorld() { alert(hello); }',
{plugins: ['lolizer']}
);
Custom plugins also work for inline <script>
s:
<script type="text/babel" data-plugins="lolizer">