Question

我已成功通过0.06 secs使用以下命令序列运行纸浆的helloworld purescript：

nodejs

接下来，我想通过在$ pulp init ... $ pulp run * Building project in /data/works/beta_projects/js_games/processing/hello-ps * Build successful. Hello sailor!内部文本中将其注入

，在正文中的浏览器中发出Hello sailor!消息

div

我需要做什么步骤？

我尝试<html> <body> <div id="output" /> </body> </html>命令并在pulp server获取空白页面而无需提供http://localhost:1337/，并且控制台中没有任何消息。

有index.html命令打印出我希望包含在pulp browserify脚本标记中的javascript，但我不知道我需要放置{ {1}}档案。

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`到浏览器中的运行代码？

1 个答案: