Installation

CDN und Online-Playground

Wenn Sie neu in JavaScript sind oder eine unkomplizierte Einrichtung für erste Erfahrungen bevorzugen, können Sie Mithril.js über ein CDN (Content Delivery Network) einbinden:

html

<script src="https://unpkg.com/mithril/mithril.js"></script>

Um Mithril.js auszuprobieren, ohne eine lokale Entwicklungsumgebung einzurichten, nutzen Sie den Online-Playground unter flems.io/mithril.

npm

bash

$ npm install mithril

TypeScript-Typdefinitionen sind über DefinitelyTyped verfügbar. Installieren Sie diese mit folgendem Befehl:

bash

$ npm install @types/mithril --save-dev

Lokales Projekt erstellen

Sie können eine der verfügbaren Mithril.js-Startvorlagen verwenden, z. B.:

Um beispielsweise mit mithril-esbuild-starter zu beginnen, führen Sie folgende Befehle aus:

bash

# Vorlage klonen
npx degit kevinfiol/mithril-esbuild-starter hello-world

# In das neu erstellte Projekt wechseln
cd ./hello-world/

# Abhängigkeiten installieren
npm install

# App erstellen und Änderungen überwachen
npm run dev

Schnellstart mit esbuild

Die esbuild-Dokumentation finden Sie hier.

Initialisieren Sie das Verzeichnis als npm-Paket.

bash

$ npm init --yes

Installieren Sie die erforderlichen Werkzeuge.

bash

$ npm install mithril
$ npm install esbuild --save-dev

Fügen Sie einen "start"-Eintrag im Abschnitt "scripts" der Datei package.json hinzu.

json

{
  "...": "...",
  "scripts": {
    "start": "esbuild index.js --bundle --outfile=bin/main.js --watch"
  }
}

Optional können Sie die Flags --jsx-factory und --jsx-fragment mit esbuild verwenden, wenn Sie JSX nutzen möchten.

json

{
  "...": "...",
  "scripts": {
    "start": "esbuild index.js --bundle --outfile=bin/main.js --jsx-factory=m --jsx-fragment='\"[\"' --watch"
  }
}

Erstellen Sie die Datei index.js.

javascript

import m from 'mithril';
m.render(document.getElementById('app'), 'hello world');

Erstellen Sie die Datei index.html.

html

<!DOCTYPE html>
<body>
  <div id="app"></div>
  <script src="bin/main.js"></script>
</body>

Starten Sie das Bundler-Skript.

bash

$ npm run start

Öffnen Sie index.html in einem Browser. Sie sollten hello world auf der Seite sehen.

Installation ​

CDN und Online-Playground ​

npm ​

Lokales Projekt erstellen ​

Schnellstart mit esbuild ​

Installation

CDN und Online-Playground

npm

Lokales Projekt erstellen

Schnellstart mit esbuild