JavaScript 交互
现在我们已经了解了Elm 架构、类型、命令、订阅，我们甚至已经在本地安装了 Elm。
但是当您需要与 JavaScript 集成时会发生什么？也许有一个浏览器 API，但尚未有相当于的 Elm 包。也许您希望在 Elm 应用程序中嵌入 JavaScript 小组件？等等。本章将概述 Elm 的三种交互机制
在我们了解这三种机制之前，我们需要知道如何将 Elm 程序编译为 JavaScript！
注意：如果您正在评估在工作场所使用 Elm，我建议您确保这三种机制能够满足您的所有需求。通过查看这些 示例，您可以快速概述本章。如果您不确定某些内容，请 在此提问，如果您不太确信，我建议您稍后回来了解 Elm。
编译为 JavaScript
默认情况下，运行 elm make 会生成 HTML 文件。因此，如果您说
elm make src/Main.elm
这样会生成一个 index.html 文件，您只需打开该文件即可开始使用。如果您正在深入了解 JavaScript 交互，您需要生成 JavaScript 文件
elm make src/Main.elm --output=main.js
这样会生成一个 JavaScript 文件，其中展开了 Elm.Main.init() 函数。因此，一旦您有了 main.js，就可以编写一个执行任何所需操作的 HTML 文件。
嵌入 HTML
以下是最小化所需的 HTML 代码，以便您的 main.js 可以在浏览器中显示
<html>
<head>
<meta charset="UTF-8">
<title>Main</title>
<script src="main.js"></script>
</head>
<body>
<div id="myapp"></div>
<script>
var app = Elm.Main.init({
node: document.getElementById('myapp')
});
</script>
</body>
</html>
我想提请您注意此处的重点
<head>- 我们有一行加载我们编译的main.js文件。这是必需的！如果你编译一个名为Main的 Elm 模块，你将在 JavaScript 中获得一个Elm.Main.init()函数。如果你编译一个名为Home的 Elm 模块，你将在 JavaScript 中获得一个Elm.Home.init()函数。等等。<body>- 我们需要在这里做两件事。首先，我们创建一个<div>，我们希望我们的 Elm 程序接手。也许它在一个更大的应用程序中，周围环绕着大量其他内容？这很好！其次，我们有一个<script>来初始化我们的 Elm 程序。在这里我们调用Elm.Main.init()函数来启动我们的程序，传递我们希望接管的node。
现在我们知道了如何在 HTML 文档中嵌入 Elm 程序，是时候开始探索三个互操作选项了：flags、ports 和 custom elements！
注意：这是一个正常的 HTML 文件，所以你可以放入任何你想要的东西！许多人在
<head>中加载其他 JS 和 CSS 文件。这意味着完全可以手动编写你的 CSS 或通过某种方式生成它。在你的<head>中添加类似<link rel="stylesheet" href="whatever-you-want.css">的东西，你就可以访问它。（有一些非常棒的选项可以完全在 Elm 中指定你的 CSS，但那是另一个话题！）