如何从`pulp init`到浏览器中的运行代码?

wiz*_*zup 4 purescript

purescript通过nodejs以下命令序列成功运行了纸浆的helloworld :

$ pulp init
...

$ pulp run
* Building project in /data/works/beta_projects/js_games/processing/hello-ps
* Build successful.
Hello sailor!
Run Code Online (Sandbox Code Playgroud)

接下来,我想Hello sailor!通过在div内部文本中注入消息来使消息在正文中显示

<html>
  <body>
    <div id="output" />
  </body>
</html>
Run Code Online (Sandbox Code Playgroud)

我需要做什么?


我尝试使用pulp server命令并获得空白页,http://localhost:1337/而无需提供index.html任何信息,并且控制台中没有任何消息。

pulp browserify一条命令可以打印出我希望包含在index.html的script标签中的javascript的命令,但是我不知道我需要在哪里放置index.html文件。

小智 6

我只是从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>
Run Code Online (Sandbox Code Playgroud)

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

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

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
Run Code Online (Sandbox Code Playgroud)

运行pulp browserify,然后pulp server您应该会看到问候!