Få JSX att fungera med Mithril och Webpack

  • Författare
  • Meddelande

AlexanderGranhof

nykomling

  • Inlägg: 1
  • Blev medlem: 29 okt 2018, 20:14

Få JSX att fungera med Mithril och Webpack

Inlägg28 apr 2019, 15:46

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)
};

Vilka är online

Användare som besöker denna kategori: Inga registrerade användare och 7 gäster