安裝

CDN 和線上遊樂場

如果您是 JavaScript 的新手，或者只是想要一個非常簡單的設定來入門，您可以從 CDN（內容傳遞網路）取得 Mithril.js：

html

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

如果您想在不需要設定本機環境的情況下試用 Mithril.js，您可以輕鬆地使用 flems.io/mithril 上的線上程式碼練習場。

npm

bash

$ npm install mithril

TypeScript 型別定義可從 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 dev

使用 esbuild 快速入門

esbuild 的文件可以在這裡找到。

bash

$ npm init --yes

安裝所需的工具。

bash

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

在 package.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。

安裝 ​

CDN 和線上遊樂場 ​

npm ​

在本地建立專案 ​

使用 esbuild 快速入門 ​

安裝

CDN 和線上遊樂場

npm

在本地建立專案

使用 esbuild 快速入門