$ npm install 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.
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:
There are several ways to get a copy of babel-standalone. Pick whichever one you like:
bower install babel-standalone
npm install --save babel-standalone
babel.js
and/or babel.min.js
from the GitHub releases page. Every release includes these files.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://unpkg.com/babel-standalone@6/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,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
.
Custom plugins and presets can be added using the registerPlugin
and registerPreset
methods respectively:
// Simple plugin that converts every identifier to "LOL"
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']}
);
// Returns "function LOL() { LOL(LOL); }"
Custom plugins also work for inline <script>
s:
<script type="text/babel" data-plugins="lolizer">
© 2010 - cnpmjs.org x YWFE | Home | YWFE