babel-standalone is now part of babel! Go check it out ⚠️ ⚠️ ⚠️ ⚠️
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:
- 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).
There are several ways to get a copy of babel-standalone. Pick whichever one you like:
- Use it via UNPKG: https://unpkg.com/babel-standalone@6/babel.min.js. This is a simple way to embed it on a webpage without having to do any other setup.
- Install via Bower:
bower install babel-standalone - Install via NPM:
npm install --save babel-standalone - Manually grab
babel.jsand/orbabel.min.jsfrom the GitHub releases page. Every release includes these files. - Install it via Git: You can use the repo at https://github.com/Daniel15/babel-standalone-bower to pull a prebuilt version from Git. Note that this is generally only advised for systems that must pull artifacts from Git, such as Bower.
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">If you want to manually upgrade the Babel version used by babel-standalone (or build your own release), follow these steps:
- Upgrade the Babel versions in
package.json. This can be done withnpm-check-upgrades(eg.npm-check-updates -u -a --packageFile ./package.json /^babel\-/) - Delete
node_modules, as npm often produces inefficient directory layouts if you upgrade in-place - Run
npm install && npm run build - Run
npm run testto ensure it works - Open
examples/example.htmand ensure it works
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent