Få JSX att fungera med Mithril och Webpack

Tänker man kan skriva ett inlägg så när man glömmer det själv så kan man läsa detta inlägget.

Först behöver man installera babel som hanterar HTML inuti Javascript. Vi följer då Mithrils guide som inte fungerar just nu, men vi gör några småjusteringar så det fungerar med webpack.

Så vi installerar alla moduler som vi behöver via NPM.

Kod: Markera allt

npm install babel-core babel-loader@7 babel-preset-es2015 babel-plugin-transform-react-jsx --save-dev

Sedan behöver vi en .babelrc fil i roten, en config fil för babel helt enkelt. Då kopierar vi den från mithrils guide.

Kod: Markera allt

{
    "presets": ["es2015"],
    "plugins": [
        [
            "transform-react-jsx",
            {
                "pragma": "m"
            }
        ]
    ]
}


Sedan behöver vi säga till webpack att använda babel genom att modifiera vår webpack.config.js fil.
Lägg till koden nedanför i din config fil.

Kod: Markera allt

module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: "babel-loader"
            }
        ]
    }

Sedan är det bara att köra webpack som vanligt. Nu kan vi då skriva html direkt i våra JS filer. Nedan är ett litet exempel:

Kod: Markera allt

"use strict";

import m from "mithril";

function routeHome() {
    m.route.set("/");
}

let navbar = {
    view: () => (
        <nav className="col-1 menu">
            <ul className="links">
                <li onclick={routeHome}>
                    <i className="material-icons">home</i>
                    <span>Hem</span>
                </li>
            </ul>
        </nav>
    )
};

export default {
    view: () => m(navbar)
};