167 lines
7.5 KiB
HTML
167 lines
7.5 KiB
HTML
<html>
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title> ES6 - Mithril.js</title>
|
|
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" />
|
|
<link href="style.css" rel="stylesheet" />
|
|
<link rel="icon" type="image/png" sizes="32x32" href="favicon.png" />
|
|
<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>2.0.0-rc.5</small></h1>
|
|
<nav>
|
|
<a href="index.html">Guide</a>
|
|
<a href="api.html">API</a>
|
|
<a href="https://gitter.im/MithrilJS/mithril.js">Chat</a>
|
|
<a href="https://github.com/MithrilJS/mithril.js">GitHub</a>
|
|
</nav>
|
|
</section>
|
|
</header>
|
|
<main>
|
|
<section>
|
|
<h1 id="es6"><a href="#es6">ES6</a></h1>
|
|
<ul>
|
|
<li>Getting Started<ul>
|
|
<li><a href="index.html">Introduction</a></li>
|
|
<li><a href="installation.html">Installation</a></li>
|
|
<li><a href="simple-application.html">Tutorial</a></li>
|
|
<li><a href="learning-mithril.html">Learning Resources</a></li>
|
|
<li><a href="support.html">Getting Help</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>
|
|
<li><a href="integrating-libs.html">3rd Party Integration</a></li>
|
|
<li><a href="paths.html">Path Handling</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/MithrilJS/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>
|
|
<li><a href="code-of-conduct.html">Code of Conduct</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>
|
|
<li><a href="archive/v1.1.6">v1 Documentation</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 an 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"><a href="#setup">Setup</a></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="language-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="language-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="language-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="language-bash">babel src --out-dir bin --source-maps</code></pre>
|
|
<h4 id="using-babel-with-webpack"><a href="#using-babel-with-webpack">Using Babel with Webpack</a></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="language-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="language-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="language-javascript">const path = require('path')
|
|
|
|
module.exports = {
|
|
entry: './src/index.js',
|
|
output: {
|
|
path: path.resolve(__dirname, './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="language-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="language-bash">npm start</code></pre>
|
|
<h4 id="production-build"><a href="#production-build">Production build</a></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="language-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="language-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="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/prism.min.js" defer></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/components/prism-jsx.min.js" defer></script>
|
|
<script src="https://unpkg.com/mithril@2.0.0-rc.5/mithril.js" async></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>
|