Skip to content
This repository has been archived by the owner on Jun 29, 2018. It is now read-only.

Commit

Permalink
Add information about custom presets/plugins to readme
Browse files Browse the repository at this point in the history
  • Loading branch information
Daniel15 committed Oct 29, 2016
1 parent eb1f1a9 commit ac5d213
Showing 1 changed file with 36 additions and 2 deletions.
38 changes: 36 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ Installation

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

- Use it via CDNJS: https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.14.0/babel.min.js. This is a simple way to embed it on a webpage without having to do any other setup.
- Use it via CDNJS: https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.18.1/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.js` and/or `babel.min.js` from the [GitHub releases page](https://github.com/Daniel15/babel-standalone/releases). Every release includes these files.
Expand All @@ -38,7 +38,7 @@ When loaded in a browser, babel-standalone will automatically compile and execut
```html
<div id="output"></div>
<!-- Load Babel -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.14.0/babel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.18.1/babel.min.js"></script>
<!-- Your custom script here -->
<script type="text/babel">
const getMessage = () => "Hello World";
Expand All @@ -57,3 +57,37 @@ Loading external scripts via `src` attribute is supported too:
```

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:

```js
// 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:

```js
var output = Babel.transform(
'function helloWorld() { alert(hello); }',
{plugins: ['lolizer']}
);
// Returns "function LOL() { LOL(LOL); }"
```

Custom plugins also work for inline `<script>`s:

```html
<script type="text/babel" data-plugins="lolizer">
```

0 comments on commit ac5d213

Please sign in to comment.