Installazione di Mithril.js

CDN e ambiente di prova online

Se sei alle prime armi con JavaScript o desideri semplicemente una configurazione rapida per iniziare, puoi includere Mithril.js tramite un CDN:

html

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

Per provare Mithril.js senza configurare un ambiente locale, puoi utilizzare un ambiente di prova online su flems.io/mithril.

npm

bash

$ npm install mithril

Le definizioni dei tipi TypeScript sono disponibili tramite DefinitelyTyped e possono essere installate con:

bash

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

Crea un progetto in locale

Puoi utilizzare uno dei diversi template iniziali per Mithril.js disponibili, come:

Ad esempio, per iniziare con mithril-esbuild-starter, esegui i seguenti comandi:

bash

# Clona il template in una directory a tua scelta
npx degit kevinfiol/mithril-esbuild-starter hello-world

# Entra nella directory del progetto appena creato
cd ./hello-world/

# Installa le dipendenze
npm install

# Compila l'applicazione e monitora le modifiche
npm run dev

Guida rapida per esbuild

La documentazione di esbuild è disponibile qui.

Inizializza la directory come pacchetto npm.

bash

$ npm init --yes

Installa le dipendenze necessarie.

bash

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

Aggiungi una voce "start" alla sezione scripts nel file package.json.

json

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

Opzionalmente, se desideri utilizzare JSX, puoi specificare i flag --jsx-factory e --jsx-fragment con esbuild.

json

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

Crea il file index.js.

javascript

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

Crea il file index.html.

html

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

Esegui lo script di bundling.

bash

$ npm run start

Apri index.html in un browser. Dovresti vedere hello world visualizzato nella pagina.

Installazione di Mithril.js ​

CDN e ambiente di prova online ​

npm ​

Crea un progetto in locale ​

Guida rapida per esbuild ​

Installazione di Mithril.js

CDN e ambiente di prova online

npm

Crea un progetto in locale

Guida rapida per esbuild