Elm

你可以像导入任何其他 JavaScript 文件一样导入 Elm 文件。

¥You can import Elm files like any another JavaScript files.

需要提前手动安装 npm 包 elm。你还需要一个 elm.json 配置文件（运行 yarn elm init 开始并根据需要进行修改）。

¥The npm package elm needs to be manually installed beforehand. You'll also need a elm.json configuration file (run yarn elm init to get started and modify it if necessary).

index.html:

<!DOCTYPE html>
<div id="root"></div>
<script type="module" src="index.js"></script>

index.js:

import { Elm } from "./Main.elm";

Elm.Main.init({ node: document.getElementById("root") });

Main.elm:

module Main exposing (..)

import Browser
import Html exposing (Html, button, div, text)
import Html.Events exposing (onClick)

main =
  Browser.sandbox { init = init, update = update, view = view }

type alias Model = Int

init : Model
init =
  0

type Msg = Increment | Decrement

update : Msg -> Model -> Model
update msg model =
  case msg of
    Increment ->
      model + 1

    Decrement ->
      model - 1


view : Model -> Html Msg
view model =
  div []
    [ button [ onClick Decrement ] [ text "-" ]
    , div [] [ text (String.fromInt model) ]
    , button [ onClick Increment ] [ text "+" ]
    ]

将多个文件编译为单个 JS 输出

¥Compiling multiple files into a single JS output

你可以使用 with 查询参数将多个 Elm 源编译到同一个包中。这可以帮助你保持更小的包大小，因为运行时和公共代码之类的东西是共享的。

¥You can use the with query param to compile multiple Elm sources into the same bundle. This can help you keep the bundle size smaller, because things like the runtime and common code are shared.

index.js:

import { Elm } from "./Main.elm?with=./MainB.elm&with=./MainC.elm";

Elm.Main.init({ node: document.getElementById("root") });
Elm.MainB.init({ node: document.getElementById("rootB") });
Elm.MainC.init({ node: document.getElementById("rootC") });

这将执行与此命令等效的操作：

¥This will do the equivalent of this command:

elm make Main.elm MainB.elm MainC.elm

with 参数可以多次使用以包含多个额外的 Elm 程序。

¥The with param can be used multiple times to include multiple extra Elm programs.

注意两件事：

¥Beware of 2 things:

路径基础：with 参数值中给出的路径相对于 import 语句中第一个文件的目录（在本例中为 Main.elm），而不是相对于包含 import 语句的 JS 文件。

¥Path base: The paths given in the with param values are relative to the directory of the first file in the import statement (in this case Main.elm), NOT relative to the JS file that contains the import statement.
无意识的重复：有效指定相同 Elm 文件但顺序不同（或前导 ./ 等不同）的多个导入将被视为不同的资源（因此将被重复）

¥Unintentional Duplication: Multiple imports that effectively specify the same Elm files but in a different order (or differ regarding leading ./, etc.) are treated as different assets (and will therefore be duplicated)

为了避免大量使用 with 参数时出现这些陷阱（即在多个位置导入某种组合），建议使用这个第三方解析器包之类的东西，它允许为常用的 Elm 文件组合指定一些简写。

¥To avoid those pitfalls when making heavy use of with params (i.e. importing some combination in more than one place), it's recommended to use something like this third-party resolver package which allows specifying some shorthands for commonly used Elm file combinations.

时间旅行调试器

¥Time-travelling debugger

当不为生产而构建时，Elm 的调试模式会自动启用（使用 parcel build 会自动禁用）。即使在开发模式下，你也可以设置环境变量 PARCEL_ELM_NO_DEBUG=1 以禁用它。

¥Elm's debug mode is automatically enabled when not building for production (it is disabled automatically with parcel build). You can set the environment variable PARCEL_ELM_NO_DEBUG=1 to disable it even in development mode.