インストール方法
CDNとオンライン環境
JavaScript初心者の方や、手軽に試したい場合は、CDN（コンテンツ配信ネットワーク）からMithril.jsを取得できます。
html
<script src="https://unpkg.com/mithril/mithril.js"></script>ローカル環境を構築せずにMithril.jsを試したい場合は、flems.io/mithrilのオンラインプレイグラウンドを簡単に利用できます。
npm
bash
$ npm install mithrilTypeScriptの型定義はDefinitelyTypedから入手できます。以下のコマンドでインストールしてください。
bash
$ npm install @types/mithril --save-devローカルプロジェクトの作成
以下のMithril.jsスターターテンプレートが利用可能です。
例えば、mithril-esbuild-starterを使う場合は、以下のコマンドを実行します。
bash
# テンプレートを任意のディレクトリにクローンします
npx degit kevinfiol/mithril-esbuild-starter hello-world
# 作成したプロジェクトディレクトリに移動します
cd ./hello-world/
# 依存関係をインストールします
npm install
# アプリをビルドし、変更を監視します
npm run devesbuild を使ったクイックスタートガイド
esbuildのドキュメントはこちらにあります。
- ディレクトリをnpmパッケージとして初期化します。
bash
$ npm init --yes- 必要なツールをインストールします。
bash
$ npm install mithril
$ npm install esbuild --save-devpackage.jsonのscriptsセクションに"start"エントリを追加します。json{ "...": "...", "scripts": { "start": "esbuild index.js --bundle --outfile=bin/main.js --watch" } }オプションとして、JSXを使用したい場合は、
--jsx-factoryと--jsx-fragmentフラグをesbuildで使用できます。json{ "...": "...", "scripts": { "start": "esbuild index.js --bundle --outfile=bin/main.js --jsx-factory=m --jsx-fragment='\"[\"' --watch" } }index.jsファイルを作成します。
javascript
import m from 'mithril';
m.render(document.getElementById('app'), 'hello world');index.htmlファイルを作成します。
html
<!DOCTYPE html>
<body>
<div id="app"></div>
<script src="bin/main.js"></script>
</body>- バンドラーのスクリプトを実行します。
bash
$ npm run start- ブラウザで
index.htmlを開きます。ページに「hello world」と表示されるはずです。