安装

优质

小牛编辑

136浏览

2023-12-01

CDN

直接从 CDN 引入 Mithril 文件是最简单的方式：

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

NPM

对于生产级项目，建议使用 NPM 来安装。在使用 NPM 之前你需要自行安装好 Node.js。

在命令行中进入项目文件夹，执行以下命令来初始化项目：

npm init --yes

然后执行命令来安装 Mithril：

npm install mithril --save

现在已经完成了 Mithril 的安装。

模块化

模块化是指把代码拆分到多个文件中。这样可以更好的组织代码，便于理解代码之间的依赖关系，并方便测试。

我们使用 Webpack 来打包模块。在命令行中执行以下命令来安装 Webpack：

npm install webpack --save-dev

然后打开项目文件夹下的 package.json 文件，在 script 中添加一行指令：

{
    "name": "my-project",
    "scripts": {
"start": "webpack src/index.js bin/app.js -d --watch"
    }
}

指令中的 -d 表示使用开发模式，该模式会生成 source maps，便于调试。--watch 表示监控文件系统，在检测到文件更改后，自动重新创建 app.js。

现在可以在命令行中执行 npm start 来执行该脚本了：

npm start

执行完脚本后便创建了 bin/app.js 文件，你可以在 HTML 中引入该文件：

<html>
  <head>
    <title>Hello world</title>
  </head>
  <body>
    <script src="bin/app.js"></script>
  </body>
</html>

模块的导入导出

要导出一个模块，请将要导出的内容分配到 module.exports 对象：

module.exports = {
    view: function() {return "hello from a module"}
}

我们使用 require 函数来导入模块。

你可以通过库名来导入 NPM 模块（例如：require("mithril") 或 require("jquery")）；也可以通过去掉了文件扩展名的文件相对路径来导入你自己的模块（例如：require("./mycomponent")）。

在 index.js 文件中，通过下列代码来导入模块：

var m = require("mithril")

var MyComponent = require("./mycomponent")

m.mount(document.body, MyComponent)

生产环境构建

bin/app.js 文件中的代码没有压缩，不适宜用在生产环境。要生成压缩后的文件，可以在 package.json 文件中添加一个新的 npm 脚本：

{
    "name": "my-project",
    "scripts": {
"start": "webpack src/index.js bin/app.js -d --watch",
"build": "webpack src/index.js bin/app.js -p",
    }
}

在生产环境中，可以使用钩子来自动运行构建脚本。下面是一个 Heroku 的例子：

{
    "name": "my-project",
    "scripts": {
"start": "webpack -d --watch",
"build": "webpack -p",
"heroku-postbuild": "webpack -p"
    }
}

其他相关介绍

开发环境的 live reload

Live reload 是指在代码发生更改后自动刷新页面的功能。Budo 是一个启用实时刷新的工具。

# 1) 安装
npm install mithril --save
npm install budo -g

# 2) 在 package.json 文件的 scripts 中加入这一行
#    "scripts": {
#        "start": "budo --live --open index.js"
#    }

# 3) 创建一个 `index.js` 文件

# 4) 运行 budo
npm start

启动后，源文件 index.js 会被编译，并在浏览器中打开该文件。当源文件发生任何更改时，都会重新编译，并刷新浏览器。

Mithril bundler

Mithril 自带一个打包工具。对于基于 ES5、除了 Mithril 之外没有其他依赖的项目来说，它足够用了；但对于有其他 NPM 依赖的项目来说，它目前还是实验性的。它生成的包比 webpack 要小，但目前不要在生产环境中使用它。

如果你想要试用它，可以打开 package.json 文件，并把 webpack 的 npm 脚本替换为：

{
    "name": "my-project",
    "scripts": {
"build": "bundle index.js --output app.js --watch"
    }
}

Vanilla

如果因为某些原因无法运行 bundler 脚本，则可以选择不使用模块化系统：

<html>
  <head>
    <title>Hello world</title>
  </head>
  <body>
    <script src="https://cdn.rawgit.com/lhorie/mithril.js/rewrite/mithril.js"></script>
    <script src="index.js"></script>
  </body>
</html>

// 如果未检测到模块化环境，则 Mithril 会被创建在全局作用域
m.render(document.body, "hello world")