在 elm-app 中使用端口

Question

我正在尝试将端口与 elm-app 一起使用。以前我使用 elm-live 和普通设置，并且能够像这样插入端口：

index.html

<body>
    <noscript>
        You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
    <script>
      window.addEventListener("load", function(event) {

        var app = Elm.Main.fullscreen(localStorage.session || null);

        app.ports.storeSession.subscribe(function(session) {
          localStorage.session = session;
        });
        ...

这有效，elm-live 似乎将 elm.js 嵌入到 index.html 的 <head> 中。

当我尝试将此设置用于 create-elm-app 端口时，编译的 javascript 嵌入在 <body> 的底部，因此添加 <script> 正如我所做的那样，结果是：

(index):68 Uncaught ReferenceError: Elm is not defined
    at (index):68

嵌入 JS 端口的最佳方式是什么？

Answer 1

halfzebra/create-elm-app project sets things up a little differently. You'll have to modify the src/index.js file like the example shows in the documentation on Javascript Interop

import './main.css';
import { Main } from './Main.elm';
import registerServiceWorker from './registerServiceWorker';

var app = Main.embed(document.getElementById('root'));

registerServiceWorker();

// ports related code
app.ports.windowTitle.subscribe(function(newTitle){
    window.document.title = newTitle;
});

在 elm-app 中使用端口

Using ports with elm-app

elm

elm-port

index.html