Elm Language榆树语言入门


备注

[Elm] [1]是一种编译为JavaScript的友好函数式编程语言。 Elm专注于基于浏览器的GUI,单页面应用程序。

用户通常会赞扬它:

版本

发布日期
0.18.0 2016年11月14日
0.17.1 2016年6月27日
0.17 2016年5月10日
0.16 二○一五年十一月十九日
0.15.1 二零一五年六月三十零日
0.15 2015年4月20日

编者

原子

光表

崇高文本

VIM

Emacs的

IntelliJ IDEA

括号

VS代码

嵌入到HTML中

将Elm代码插入现有HTML页面有三种可能性。

嵌入身体标签

假设您已将Hello World示例编译为elm.js 文件,您可以让Elm接管<body> 标记,如下所示:

<!DOCTYPE html>
<html>
    <body>
        <script src="elm.js"></script>
        <script>
          Elm.Main.fullscreen()
        </script>
    </body>
</html>
 

警告 :有时某些Chrome扩展程序会与<body> 混乱,这会导致您的应用程序在生产中中断。建议始终嵌入特定的div中。更多信息在这里

嵌入Div(或其他DOM节点)

或者,通过提供具体的HTML元素,可以在该特定页面元素中运行Elm代码:

<!DOCTYPE html>
<html>
    <head>
        <title>Hello World</title>
    </head>
    <body>
        <div id='app'></div>
        <script src="elm.js"></script>
        <script>
            Elm.Main.embed(document.getElementById('app'))
        </script>
    </body>
</html>
 

嵌入Web工作者(无UI)

榆树代码也可以作为工作者启动并通过端口进行通信:

<!DOCTYPE html>
<html>
    <head>
        <title>Hello Worker</title>
    </head>
    <body>
        <script src="elm.js"></script>
        <script>
            var app = Elm.Main.worker();
            app.ports.fromElmToJS.subscribe(function(world) {
                console.log(world)
            });
            app.ports.fromJSToElm.send('hello');
        </script>
    </body>
</html>
 

你好,世界

了解如何在Initialize和build中编译此代码

import Html

main = Html.text "Hello World!"
 

初始化和构建

您应该在您的计算机上安装Elm平台,以下教程是在假设您熟悉终端的情况下编写的。

初始化

创建一个文件夹并使用您的终端导航到它:

$ mkdir elm-app
$ cd elm-app/
 

初始化Elm项目并安装核心依赖项:

$ elm-package install -y
 

elm-package.jsonelm-stuff 文件夹应该出现在你的项目中。

为您的应用程序Main.elm 创建入口点,并将Hello World示例粘贴到其中。

建立项目

要构建您的第一个项目,请运行:

$ elm-make Main.elm
 

这将生成index.html ,其中Main.elm 文件(以及所有依赖项)编译为JavaScript并内联到HTML中。 尝试在浏览器中打开它!

如果失败并出现错误, I cannot find module 'Html'. 这意味着您没有使用最新版本的Elm。您可以通过升级Elm并重做第一步或使用以下命令来解决问题:

$ elm-package install elm-lang/html -y
 

如果您有自己的index.html 文件(例如,使用ports时),您还可以将Elm文件编译为JavaScript文件:

$ elm-make Main.elm --output=elm.js
 

示例嵌入到HTML中的更多信息。

安装

要使用Elm开始开发,您需要安装一组名为elm-platform的工具。

它包括: elm-makeelm-reactorelm-replelm-package

所有这些工具都可以通过CLI获得,换句话说,您可以从终端使用它们。

选择以下方法之一来安装Elm:

使用安装程序

官方网站下载安装程序,然后按照安装向导进行操作。

使用npm

您可以使用节点包管理器来安装Elm平台。

全球安装:

$ npm install elm -g
 

本地安装:

$ npm install elm
 

可通过以下方式访问本地安装的Elm平台工具:

$ ./node_modules/.bin/elm-repl  # launch elm-repl from local node_modules/
 

使用自制软件

$ brew install elm
 

使用elm-use在版本之间切换

安装elm-use

$ npm install -g elm-use
 

切换到较旧或较新的elm版本

$ elm-use 0.18  // or whatever version you want to use
 

进一步阅读

了解如何初始化和构建您的第一个项目。

本地构建服务器(Elm Reactor)

Elm Reactor是您的应用程序原型设计的基本工具。

请注意,如果您使用Http.App.programWithFlagsPorts ,您将无法使用Elm Reactor编译Main.elm

在项目目录中运行elm-reactor将启动带有项目资源管理器的Web服务器,该服务器允许您编译每个单独的组件。

重新加载页面时,您对代码所做的任何更改都会更新。

$ elm-reactor                     # launch elm-reactor on localhost:8000
$ elm-reactor -a=0.0.0.0 -p=3000  # launch elm-reactor on 0.0.0.0:3000
 

REPL

了解Elm的一个好方法是尝试在REPL(Read-Eval-Print Loop)中编写一些表达式。在elm-app 文件夹中打开一个控制台(在初始化和构建阶段创建)并尝试以下操作:

$ elm repl
---- elm-repl 0.17.1 -----------------------------------------------------------
 :help for help, :exit to exit, more at <https://github.com/elm-lang/elm-repl>
--------------------------------------------------------------------------------
> 2 + 2
4 : number
> \x -> x
<function> : a -> a
> (\x -> x + x)
<function> : number -> number
> (\x -> x + x) 2
4 : number
>
 

elm-repl 实际上是一个非常强大的工具。假设您使用以下代码在elm-app 文件夹中创建Test.elm 文件:

module Test exposing (..)


a = 1


b = "Hello"
 

现在,你回到你的REPL(已经打开)并输入:

import Test exposing (..)
> a
1 : number
> b
"Hello" : String
>
 

更令人印象深刻的是,如果您为Test.elm 文件添加新定义,例如

s = """
Hello,
Goodbye.
"""
 

保存文件,再次返回REPL,无需再次导入Test ,新定义立即可用:

> s
"\nHello,\nGoodbye.\n" : String
>
 

当你想要编写跨越多行的表达式时,这非常方便。快速测试刚刚定义的函数也非常有用。将以下内容添加到您的文件中:

f x =
  x + x * x
 

保存并返回REPL:

> f
<function> : number -> number
> f 2
6 : number
> f 4
20 : number
>
 

每次修改并保存已导入的文件,然后返回REPL并尝试执行任何操作时,将重新编译完整文件。因此,它会告诉您代码中的任何错误。添加这个:

c = 2 ++ 2
 

试试看:

> 0
-- TYPE MISMATCH -------------------------------------------------- ././Test.elm

The left argument of (++) is causing a type mismatch.

22|     2 ++ 2
        ^
(++) is expecting the left argument to be a:

    appendable

But the left argument is:

    number

Hint: Only strings, text, and lists are appendable.


> 
 

总结一下REPL的这个介绍,让我们补充一点, elm-repl 也知道你用elm package install 。例如:

> import Html.App
> Html.App.beginnerProgram
<function>
    : { model : a, update : b -> a -> a, view : a -> Html.Html b }
      -> Platform.Program Basics.Never
>
 

风格指南和榆木格式

官方风格指南位于主页上 ,通常用于:

  • 可读性(而不是紧凑性)
  • 易于修改
  • 干净的差异

这意味着,例如,这:

homeDirectory : String
homeDirectory =
  "/root/files"


evaluate : Boolean -> Bool
evaluate boolean =
  case boolean of
    Literal bool ->
        bool

    Not b ->
        not (evaluate b)

    And b b' ->
        evaluate b && evaluate b'

    Or b b' ->
        evaluate b || evaluate b'
 

被认为比以下更好

homeDirectory = "/root/files"

eval boolean = case boolean of
    Literal bool -> bool
    Not b        -> not (eval b)
    And b b'     -> eval b && eval b'
    Or b b'      -> eval b || eval b'
 
0.16

工具elm格式有助于自动格式化源代码(通常在保存时),与Go语言的gofmt类似 。同样,基础值是一个一致的样式和保存参数和关于各种问题的火焰战争,如选项卡与空格缩进长度

您可以按照Github仓库中说明安装elm-format 。然后配置编辑器以自动格式化Elm文件或手动运行elm-format FILE_OR_DIR --yes