Telepítés

CDN és online játszótér

Ha még új vagy a JavaScriptben, vagy csak egy egyszerű beállítást szeretnél a kezdéshez, a Mithril.js-t egy CDN segítségével is beszerezheted:

html

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

Ha a Mithril.js-t helyi telepítés nélkül szeretnéd kipróbálni, használhatsz egy online játszóteret a flems.io/mithril címen.

npm

bash

$ npm install mithril

A TypeScript típusdefiníciók a DefinitelyTyped-ból érhetők el. Így telepítheted őket:

bash

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

Helyi projekt létrehozása

Használhatod a számos elérhető Mithril.js kezdősablon egyikét, például:

Például, ha a mithril-esbuild-starter-rel szeretnél kezdeni, futtasd a következő parancsokat:

bash

# Másold a sablont egy általad választott könyvtárba
npx degit kevinfiol/mithril-esbuild-starter hello-world

# Lépj be az újonnan létrehozott projekt könyvtárába
cd ./hello-world/

# Telepítsd a függőségeket
npm install

# Fordítsd le az alkalmazást és figyeld a változásokat a terminálban
npm run dev

Gyors kezdés az esbuild-del

Az esbuild dokumentációja itt érhető el.

Inicializáld a könyvtárat npm csomagként.

bash

$ npm init --yes

Telepítsd a szükséges eszközöket.

bash

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

Add hozzá a "start" bejegyzést a package.json fájl scripts szekciójához.

json

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

Opcionálisan, ha JSX-et szeretnél használni, használhatod a --jsx-factory és --jsx-fragment paramétereket az esbuild-del.

json

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

Hozd létre az index.js fájlt.

javascript

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

Hozd létre az index.html fájlt.

html

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

Futtasd a bundler szkriptet.

bash

$ npm run start

Nyisd meg az index.html fájlt egy böngészőben. Látnod kell a hello world szöveget az oldalon.

Telepítés ​

CDN és online játszótér ​

npm ​

Helyi projekt létrehozása ​

Gyors kezdés az esbuild-del ​

Telepítés

CDN és online játszótér

npm

Helyi projekt létrehozása

Gyors kezdés az esbuild-del