mithril

<html> <head> <meta charset="UTF-8" /> <title> ES6 - Mithril.js</title> <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' /> <link href="lib/prism/prism.css" rel="stylesheet" /> <link href="style.css" rel="stylesheet" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> </head> <body> <header> <section> <a class="hamburger" href="javascript:;">≡</a> <h1><img src="logo.svg"> Mithril <small>1.0.0</small></h1> <nav> <a href="index.html">Guide</a> <a href="api.html">API</a> <a href="https://gitter.im/lhorie/mithril.js">Chat</a> <a href="https://github.com/lhorie/mithril.js">Github</a> </nav> </section> </header> <main> <section> <h1 id="es6">ES6</h1> <ul> <li>Tutorials<ul> <li><a href="installation.html">Installation</a></li> <li><a href="index.html">Introduction</a></li> <li><a href="simple-application.html">Tutorial</a></li> </ul> </li> <li>Resources<ul> <li><a href="jsx.html">JSX</a></li> <li><strong><a href="es6.html">ES6</a></strong><ul> <li><a href="#setup">Setup</a></li> <li><a href="#using-babel-with-webpack">Using Babel with Webpack</a></li> </ul> </li> <li><a href="css.html">CSS</a></li> <li><a href="animation.html">Animation</a></li> <li><a href="testing.html">Testing</a></li> <li><a href="examples.html">Examples</a></li> </ul> </li> <li>Key concepts<ul> <li><a href="vnodes.html">Vnodes</a></li> <li><a href="components.html">Components</a></li> <li><a href="lifecycle-methods.html">Lifecycle methods</a></li> <li><a href="keys.html">Keys</a></li> <li><a href="autoredraw.html">Autoredraw system</a></li> </ul> </li> <li>Social<ul> <li><a href="https://github.com/lhorie/mithril.js/wiki/JOBS">Mithril Jobs</a></li> <li><a href="contributing.html">How to contribute</a></li> <li><a href="credits.html">Credits</a></li> </ul> </li> <li>Misc<ul> <li><a href="framework-comparison.html">Framework comparison</a></li> <li><a href="change-log.html">Change log/Migration</a></li> </ul> </li> </ul> <hr> <p>Mithril is written in ES5, and is fully compatible with ES6 as well. ES6 is a recent update to Javascript that introduces new syntax sugar for various common cases. It's not yet fully supported by all major browsers and it's not a requirement for writing application, but it may be pleasing to use depending on your team's preferences.</p> <p>In some limited environments, it's possible to use a significant subset of ES6 directly without extra tooling (for example, in internal applications that do not support IE). However, for the vast majority of use cases, a compiler toolchain like <a href="https://babeljs.io">Babel</a> is required to compile ES6 features down to ES5.</p> <h3 id="setup">Setup</h3> <p>The simplest way to setup an ES6 compilation toolchain is via <a href="https://babeljs.io/">Babel</a>.</p> <p>Babel requires NPM, which is automatically installed when you install <a href="https://nodejs.org/en/">Node.js</a>. Once NPM is installed, create a project folder and run this command:</p> <pre><code class="lang-bash">npm init -y </code></pre> <p>If you want to use Webpack and Babel together, <a href="#using-babel-with-webpack">skip to the section below</a>.</p> <p>To install Babel as a standalone tool, use this command:</p> <pre><code class="lang-bash">npm install babel-cli babel-preset-es2015 babel-plugin-transform-react-jsx --save-dev </code></pre> <p>Create a <code>.babelrc</code> file:</p> <pre><code class="lang-json">{ "presets": ["es2015"], "plugins": [ ["transform-react-jsx", { "pragma": "m" }] ] } </code></pre> <p>To run Babel as a standalone tool, run this from the command line:</p> <pre><code class="lang-bash">babel src --out-dir bin --source-maps </code></pre> <h4 id="using-babel-with-webpack">Using Babel with Webpack</h4> <p>If you're already using Webpack as a bundler, you can integrate Babel to Webpack by following these steps.</p> <pre><code class="lang-bash">npm install babel-core babel-loader babel-preset-es2015 babel-plugin-transform-react-jsx --save-dev </code></pre> <p>Create a <code>.babelrc</code> file:</p> <pre><code class="lang-json">{ "presets": ["es2015"], "plugins": [ ["transform-react-jsx", { "pragma": "m" }] ] } </code></pre> <p>Next, create a file called <code>webpack.config.js</code></p> <pre><code class="lang-javascript">module.exports = { entry: './src/index.js', output: { path: './bin', filename: 'app.js', }, module: { loaders: [{ test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' }] } } </code></pre> <p>This configuration assumes the source code file for the application entry point is in <code>src/index.js</code>, and this will output the bundle to <code>bin/app.js</code>.</p> <p>To run the bundler, setup an npm script. Open <code>package.json</code> and add this entry under <code>"scripts"</code>:</p> <pre><code class="lang-json">{ "name": "my-project", "scripts": { "start": "webpack -d --watch" } } </code></pre> <p>You can now then run the bundler by running this from the command line:</p> <pre><code class="lang-bash">npm start </code></pre> <h4 id="production-build">Production build</h4> <p>To generate a minified file, open <code>package.json</code> and add a new npm script called <code>build</code>:</p> <pre><code class="lang-json">{ "name": "my-project", "scripts": { "start": "webpack -d --watch", "build": "webpack -p" } } </code></pre> <p>You can use hooks in your production environment to run the production build script automatically. Here's an example for <a href="https://www.heroku.com/">Heroku</a>:</p> <pre><code class="lang-json">{ "name": "my-project", "scripts": { "start": "webpack -d --watch", "build": "webpack -p", "heroku-postbuild": "webpack -p" } } </code></pre> <hr /> <small>License: MIT. © Leo Horie.</small> </section> </main> <script src="lib/prism/prism.js"></script> <script> document.querySelector(".hamburger").onclick = function() { document.body.className = document.body.className === "navigating" ? "" : "navigating" document.querySelector("h1 + ul").onclick = function() { document.body.className = '' } } </script> </body> </html>