如何在浏览器中从 `pulp init` 到运行代码？

Question

我使用以下命令序列通过 nodejs 成功获取了 pulp 的 helloworld purescript 运行：

$ pulp init
...

$ pulp run
* Building project in /data/works/beta_projects/js_games/processing/hello-ps
* Build successful.
Hello sailor!

接下来，我想通过在 div 内部文本

中注入 Hello sailor! 消息，在正文中制作浏览器中的消息

<html>
  <body>
    <div id="output" />
  </body>
</html>

我需要做什么步骤？

我尝试了 pulp server 命令并在 http://localhost:1337/ 处获得了空白页面，无需提供 index.html 并且控制台中没有任何消息。

有一个 pulp browserify 命令打印出 javascript，我希望它包含在 index.html 的脚本标签中，但我不知道我需要放在哪里index.html 文件。

Answer 1

我刚开始使用 PureScript，所以肯定有更好的答案，但这行得通。

在根文件夹中创建index.html并添加：

<!doctype html>
<html>
  <body>    
    <script src="/jquery-3.2.1.min.js"></script>
    <script src="/app.js"></script>
    <div id="output"></div>
  </body>
</html>

要实际修改 DOM，此示例使用 https://github.com/purescript-contrib/purescript-jquery，因此您必须确保在加载 app.js 之前加载 jQuery。

purescript-jquery 似乎是使用 DOM 最简单的选项。其他选项是

https://github.com/purescript-web/purescript-dom（水平很低）
https://github.com/aktowns/purescript-simple-dom（无法使用 PureScript 0.11.6）

Main.purs 看起来像这样：

module Main where

import Control.Monad.Eff (Eff)
import Control.Monad.Eff.Console (CONSOLE)
import Control.Monad.Eff.JQuery (append, create, body, ready, setText, find)
import DOM (DOM)
import Prelude hiding (append)

main :: forall eff. Eff ( dom :: DOM
                        , console :: CONSOLE
                        | eff
                        ) Unit
main =
  ready $ do
    -- Get the document body
    body <- body

    -- Find the div
    div <- find "#output" body

    -- Create a paragraph to display a greeting
    greeting <- create "<p>"    
    append greeting div

    setText "Hello Sailor!" greeting

运行 pulp browserify 然后 pulp server 你应该会看到问候语！

如何在浏览器中从 `pulp init` 到 运行 代码？

How to get from `pulp init` to running code in browser?

purescript

如何在浏览器中从 `pulp init` 到运行代码？