Installation

CDN et environnement de test en ligne

Si vous débutez avec JavaScript ou si vous souhaitez une configuration très simple pour une prise en main rapide, vous pouvez utiliser Mithril.js à partir d'un CDN (réseau de diffusion de contenu) :

html

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

Pour tester Mithril.js sans configurer un environnement local, vous pouvez utiliser un environnement de test en ligne sur flems.io/mithril.

npm

bash

$ npm install mithril

Les définitions de type TypeScript sont disponibles sur DefinitelyTyped. Installez-les avec la commande suivante :

bash

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

Créer un projet localement

Vous pouvez utiliser l'un des modèles de démarrage Mithril.js existants, tels que :

Par exemple, pour démarrer avec mithril-esbuild-starter, exécutez les commandes suivantes :

bash

# Clonez le modèle dans un répertoire de votre choix
npx degit kevinfiol/mithril-esbuild-starter hello-world

# Accédez au répertoire du projet
cd ./hello-world/

# Installez les dépendances
npm install

# Compilez l'application et surveillez les modifications
npm run dev

Démarrage rapide avec esbuild

La documentation d'esbuild est disponible ici.

Initialisez le répertoire en tant que package npm.

bash

$ npm init --yes

Installez les outils nécessaires.

bash

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

Ajoutez une entrée "start" à la section scripts dans package.json.

json

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

Si vous souhaitez utiliser JSX, vous pouvez utiliser les options --jsx-factory et --jsx-fragment avec esbuild.

json

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

Créez le fichier index.js.

javascript

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

Créez le fichier index.html.

html

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

Exécutez votre script de build.

bash

$ npm run start

Ouvrez index.html dans un navigateur. Vous devriez voir hello world affiché sur la page.

Installation ​

CDN et environnement de test en ligne ​

npm ​

Créer un projet localement ​

Démarrage rapide avec esbuild ​

Installation

CDN et environnement de test en ligne

npm

Créer un projet localement

Démarrage rapide avec esbuild