私はElmとWebRTCを一緒に試しています。しかし、WebRTCの場合、私はjavascriptにいくつかのinteropが必要です。そこで、WebRTCとmain.jsの両方に必要なスクリプトが含まれたindex.htmlを作成しました。ElmをHTMLに埋め込んだelm-reactorを使用していますか？
しかし、私はelm-reactorを使用しています。それは素晴らしい素晴らしいです。しかし、main.jsはありません。私はelm-makeで作成できますが、手動で更新する必要があります。
したがって、elm-reactorと組み込みelmを併用する方法はありますか？
注：私は最新のElm 0.18を使用しています。
ビットをハックする場合は、use your own index.html with elm reactorに完全に可能です。に
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="styles.css"><!-- Put your styles in folder with index.html -->
</head>
<body>
<div style="width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; color: #9A9A9A; font-family: 'Source Sans Pro';">
<div style="font-size: 3em;">Building your project!</div>
<img src="/_reactor/waiting.gif">
<div style="font-size: 1em">With new projects, I need a bunch of extra time to download packages.</div>
</div>
</body>
<!-- Fonts and external JS and styles are available, I've put Ace for example -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.4/ace.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.4/theme-chrome.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.4/worker-lua.js"></script>
<!-- Put the name of your app here (my sources place in `src` forder) -->
<script type="text/javascript" src="/_compile/src/YourApp.elm"></script>
<!-- Removes splash and starts elm app. -->
<script type="text/javascript">
while (document.body.firstChild) {
document.body.removeChild(document.body.firstChild);
}
runElmProgram();
</script>
</html>
あなたは、ポートまたはフラグを使用する場合は、ポートを使用するElm.App.fullscreen(flags)などを必要とする（the following exampleを使用していますが、runElmProgram()：ちょうどindex.htmlファイルに次のように入れて、反応器内でそれを開く（例えばhttp://localhost:8000/src/index.html）エラーを表示）：
<!doctype html>
<meta charset=utf-8>
<title>a title</title>
<link href=/bundle.css rel=stylesheet>
<body></body>
<script src="/_compile/Main.elm"></script> <!-- this will fail in production -->
<script src="/elm-bundle.js"></script> <!-- this will fail in development -->
<script>
var app
var flags = {}
try {
app = Elm.App.fullscreen(flags)
/* app.ports is now available */
} catch (e) {
// this will run in case there are compile errors:
var stylesheets = document.querySelectorAll('link')
for (var i = 0; i < stylesheets.length; i++) {
stylesheets[i].parentNode.removeChild(stylesheets[i])
}
runElmProgram()
}
</script>
今日（0.18.0）現在、正式にはあなたのアプリケーションをカスタムHTMLに埋め込むためにelm-reactorを使用することはできません。追加設定なしでelm-reactorでポートサブスクリプションを持つことも不可能です。
はあなたがelm-liveで見たいと思うかもしれませんCreate Elm Appまたはalternatives.
ああ、恥ずかしいですが、明確な答えをありがとう！ –
@TheOddlerがお手伝いします！私はCreate Elm Appを維持しています。あなたが何か問題を抱えている場合は、twitterやslackに関する質問を私に打ち明けてください。 – halfzebra
のようなものを使用することを検討してください。
elm-reactorと同じオプションがありますが、独自のindex.htmlを使用することもできます。
誰もこの方法で歴史を掘り下げていたのですか？私はアプリケーションのdivが '
@Charlie興味深いです、私は古いプロジェクトの1つをダブルチェックして、それは私のために働きます。私の推測では、あなたはZインデックスの問題があるということです。 '.elm-overlay {z-index：100;}'（またはあなたが使っているものよりも高いもの）は助けてください。 –
はい、それでした！なぜそれが起こっていたのか分かりませんが、それはすばらしい単純な解決策です。ありがとう！ – Charlie