Elm 编译器升级指南：从 0.16 迁移到 0.17 版本-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00499/article/details/148443241

Elm 编译器升级指南：从 0.16 迁移到 0.17 版本

compiler Compiler for Elm, a functional language for reliable webapps. 项目地址: https://gitcode.com/gh_mirrors/co/compiler

前言

Elm 0.17 版本带来了许多重要的改进和变化，这些变化主要集中在简化架构、统一命名规范以及优化与 JavaScript 的交互方式上。本文将详细介绍如何将现有项目从 Elm 0.16 升级到 0.17 版本，帮助开发者顺利完成迁移。

第一步：更新 elm-package.json

在 0.17 版本中，核心包的命名和结构发生了重要变化：

包名变更：
- evancz/elm-html → elm-lang/html
- evancz/elm-svg → elm-lang/svg
- evancz/virtual-dom → elm-lang/virtual-dom
功能迁移：
- evancz/start-app 的功能现在位于 elm-lang/html 的 Html.App 模块中
- evancz/elm-effects 的功能现在位于 elm-lang/core 的 Platform.* 模块中
- Graphics.* 的功能现在位于 evancz/elm-graphics 包中

更新建议：

手动修改 elm-version 字段为 "0.17.0 <= v < 0.18.0"
清空 dependencies 字段
使用包管理工具重新安装所需依赖

语法变更

模块声明

0.17 版本简化了模块声明语法：

-- 0.16 语法
module Queue (..) where

-- 0.17 语法
module Queue exposing (..)

这个变化非常直观，只需要将 where 替换为 exposing 即可。

架构相关变更

Action 更名为 Msg

在 Elm 架构中，Action 类型被重命名为 Msg，这更符合其实际用途：

-- 0.16
type Action = Increment | Decrement

-- 0.17
type Msg = Increment | Decrement

这种命名更准确地反映了这些值是来自用户、服务器或浏览器的"消息"。

移除 Signal.Address

0.17 版本移除了 Signal.Address 概念，简化了视图代码：

-- 0.16
view : Signal.Address Action -> Model -> Html
view address model =
  button [ onClick address Decrement ] [ text "-" ]

-- 0.17
view : Model -> Html Msg
view model =
  button [ onClick Decrement ] [ text "-" ]

主要变化：

移除所有 address 参数
Html 类型变为 Html Msg，表示可以产生特定类型消息的 HTML

Effects 更名为 Cmd

Effects 被整合到核心库并更名为 Cmd：

-- 0.16
update : Action -> Model -> (Model, Effects Action)

-- 0.17
update : Msg -> Model -> (Model, Cmd Msg)

Cmd 模块位于 Platform.Cmd 中，默认已导入。

应用启动方式变更

StartApp 被整合到 Html.App 模块中：

-- 0.16
import StartApp
main = StartApp.start { ... }

-- 0.17
import Html.App as Html
main = Html.program { ... }

main 的类型从 Signal Html 变为 Program flags，Elm 现在会自动处理所有设置。

端口(Ports)更新

输出端口

-- 0.16
port focus : Signal String

-- 0.17
port focus : String -> Cmd msg

现在输出端口是一个函数，可以创建命令。

输入端口

-- 0.16
port users : Signal User

-- 0.17
port users : (User -> msg) -> Sub msg

输入端口现在创建订阅，而不是信号。

JavaScript 交互变更

初始化 Elm 程序的方式有所简化：

| 初始化方式 | 0.16 语法 | 0.17 语法 | |------------|-----------|-----------| | 嵌入 | Elm.embed(Elm.Main, node) | Elm.Main.embed(node) | | 全屏 | Elm.fullscreen(Elm.Main) | Elm.Main.fullscreen() | | Worker | Elm.worker(Elm.Main) | Elm.Main.worker() |