在 Electron 中使用 Elm 0.19 时无法读取未定义的属性“Elm”答案

【问题标题】：Cannot read property 'Elm' of undefined while using Elm 0.19 in Electron在 Electron 中使用 Elm 0.19 时无法读取未定义的属性“Elm”
【发布时间】：2018-10-21 23:32:44
【问题描述】：

我正在用 Electron 试验 Elm 0.19，在 Electron 中构建一个简单的 Elm 应用程序（基于 Counter 示例）。当我运行electron-forge start 时，我收到一条错误消息，指出Cannot read property 'Elm' of undefined 突出显示了elm.js 文件的scope[‘Elm’] 部分。

function _Platform_export(exports) {
    scope[‘Elm’] ? _Platform_mergeExportsDebug(‘Elm’, scope[‘Elm’], exports) : scope[‘Elm’] = exports;
}

有趣的是，如果我改为运行 elm-live Main.elm --open -- --output=elm.js，完全相同的文件（Main.elm、index.html）打开得很好（按预期显示计数器）。

所以看来 this 在 Electron 中传递给 elm.js 是未定义的，这会导致 scope 未定义。

Chrome 开发工具显示，对于 Electron 应用程序，传递给 elm.js 的 scope 变量是 undefined。对于 elm-live，该值是 Window 对象。

elm.js

(function(scope){
'use strict';

 --- omitted ----

    var author$project$Main$main = elm$browser$Browser$sandbox({ init: author$project$Main$init, update: author$project$Main$update, view: author$project$Main$view });
    _Platform_export({ 'Main': { 'init': author$project$Main$main(elm$json$Json$Decode$succeed(_Utils_Tuple0))(0) } });
})(undefined);

elm.js? [sm]

(function(scope){
'use strict';

 --- omitted ----

var author$project$Main$main = elm$browser$Browser$sandbox(
    {init: author$project$Main$init, update: author$project$Main$update, view: author$project$Main$view});
_Platform_export({'Main':{'init':author$project$Main$main(
    elm$json$Json$Decode$succeed(_Utils_Tuple0))(0)}});}(this));

错误信息

Uncaught TypeError: Cannot read property 'Elm' of undefined
    at _Platform_export (elm.js:1949)
    at elm.js:4004
    at elm.js:4005
index.html:44 Uncaught ReferenceError: Elm is not defined
    at index.html:44

索引.html

<!DOCTYPE HTML>
<html>

<head>
</head>

<body>
    <div id="elm"></div>
</body>
<script src="./elm.js"></script>
<script>
    var app = Elm.Main.init({
        node: document.getElementById('elm')
    });
</script>
</html>

Main.elm

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


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


-- MODEL

type alias Model = Int

init : Model
init =
  0


-- UPDATE

type Msg = Increment | Decrement

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

    Decrement ->
      model - 1


-- VIEW

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

【问题讨论】：

标签： electron elm

【解决方案1】：

在 Slack 上的 Elm #electron 频道中，我看到了关于这个问题的讨论，这里是对任何感兴趣的人的回顾。

问题是电子渲染器中没有定义“this”
这会导致 Elm 运行时中的 scope 为 undefined。
可能的解决方法是
- 使用https://elm-lang.org/0.19.0/optimize 处的说明对编译后的 elm 代码进行丑化
- 或将编译后的 elm.js 文件底部的 (this) 更改为 (this||window)（在此处打开问题 https://github.com/elm/core/issues/998）

【讨论】：