使用Elm-reactor和嵌入在HTML中的Elm？ [英] Using elm-reactor with Elm embedded in HTML?
问题描述
所以我正在一起尝试Elm和WebRTC。但是对于WebRTC，我需要对javascript进行互操作。因此，我为WebRTC和main.js创建了一个包含所需脚本的index.html。
So I'm trying out Elm and WebRTC together. However for WebRTC I need some interop to javascript. So I created an index.html with the needed script includes, for both WebRTC and main.js.
但是，我正在使用elm-reactor。超级好。但是没有main.js。我可以用elm-make来创建它，但是然后我必须手动更新它。
However, I am using elm-reactor. Which is super nice. But there is no main.js. I can create it with elm-make, but then I would have to manually update it.
因此，有没有办法让elm反应器与嵌入式elm一起工作？
So, is there a way to have elm-reactor work together with embedded elm?
注意：我正在使用Elm 0.18，在撰写本文时为最新版本。
Note: I'm using Elm 0.18, latest as of writing.
推荐答案
如果您愿意稍作修改，则完全有可能在榆木反应堆中使用您自己的index.html 。只需将以下内容放入index.html文件中，然后在反应堆中将其打开（例如 http：// localhost：8000 /src/index.html ）：
If you're willing to hack a bit, it's perfectly possible to use your own index.html with elm reactor. Just put the following in an index.html file and open it in reactor (e.g. http://localhost:8000/src/index.html):
<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）等使用端口，但 runElmProgram（）显示错误）：
If you want to use ports or flags, use the following example (you need Elm.App.fullscreen(flags) etc to use ports, but runElmProgram() to show errors):
<!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>
这篇关于使用Elm-reactor和嵌入在HTML中的Elm？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
