The Definitive Guide to Compilation on Plunker

"use babel";

var app = angular.module('plunker', []);

app.controller('MainCtrl', ($scope) => {
  $scope.name = 'World';
});

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="https://rawgit.com/isagalaev/highlight.js/master/src/styles/github.css" />
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.3/angular.js" data-semver="1.4.3"></script>
    <script src="app.js"></script>
  </head>

  <body class="container">
    <div class="row">
      <div class="col-xs-12">
        <ng-include src="'README.html'"></ng-include>
      </div>
    </div>
  </body>

</html>

/* Put your css in here */

body {
  padding-top: 16px;
}

# Compilation in Plunker

Plunker is designed to make it as easy as possible for you to
work in compiled web languages.

There are two ways that Plunker will trigger compilation:
1. The `implicit` mode
2. The `explicit` mode (**Deprecated**)

Additionally, you can configure some of the compilers with
configuration files as described below.

**This system is [Open Source](https://github.com/ggoodman/plunker-run)**

## The implicit mode

The implicit mode works in a way that is totally transparent
to the user. You create a file in the source language of your
choice (with the corresponding  **source** extension). Then, when you
want to _use_ this file, you request that file with the
**target** extension.

For example, this Plunk demonstrates two examples of implicit
compilation.

1. There is a file `style.less`, written in less, that is
   being requested by a `<link rel="stylesheet" href="style.css">`
   tag in `index.html`.
2. There is a file `README.md`, written in markdown, that is
   being included in the `index.html` via an `ng-include`
   directive. That directive requests `README.html`, not
   `README.md`.

Notice how in both instances, the file requested differs
from the file in the Plunk only by its extension.

#### Supported mappings

| Library       | Source                          | Target  | Deprecated |
| --------      | ------------------------------  | ------- | ---------- |
| Babel         | `.jsx`, `.6to5.js`, `.babel.js` | `.js`   | |
| Typescript    | `.ts`                           | `.js`   | |
| Traceur       | `.es6.js`, `.traceur.js`        | `.js`   | YES |
| Less          | `.less`                         | `.css`  | |
| Sass          | `.sass`, `.scss`                | `.css`  | |
| Markdown      | `.md`, `.markdown`              | `.html` | |
| Coffee-Script | `.coffee`                       | `.js`   | |
| Jade          | `.jade`                         | `.css`  | |
| Stylus        | `.styl`                         | `.css`  | |


#### Supported explicit compilers (and config files)

| Library | Directive | Config file | Deprecated |
| ------- | --------- | ----------- | ---------- |
| Babel | `"use babel";` | `.babelrc` | |
| Typescript | `"use typescript";` | `tsconfig.json` | |
| Traceur | `"use traceur";` | `.traceurrc` | YES |

_**Note**: These files will be ignored if they are not valid JSON_

## The explicit mode

**The explicit mode has been deprecated and is no longer supported.**

The explicit mode is currently only supported for javascript
(`.js`) files. To trigger a `.js` file to be passed through
one of the supported compilers, you need to use the
appropriate `directive`.

An example of using the `babel` directive is:

```js
"use babel";

document.onload = (e) => {
  alert('I just annoyed whoever visited this page! USING ES6!');
};
```

The syntax for using a compilation directive is
`"use <compiler>[(config: param, param2: value)]"`. In other words, you
need to indicate the compiler you'd like to use and you can
optionally pass in compiler options inline as a list of
key-value pairs inside parentheses.


I'm open to adding more support for other configuration files
if you create an issue on
[Github](https://github.com/ggoodman/plunker-run/issues)
indicating which language, the idiomatic config file and
a link to an example of how that config file is used by the
compiler.