`pulp init`からブラウザでコードを実行する方法は？

debugcn 投稿 Dev

wizzup

次のコマンドシーケンスpurescriptを使用nodejsして、パルプのhelloworldを実行することに成功しました。

$ 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が表示され、コンソールにメッセージが表示されません。

のscriptタグにpulp browserify含まれると予想されるJavaScriptを出力するコマンドがありますが、ファイルindex.htmlをどこに置く必要があるのかわかりませんindex.html。

marcusficner

私は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を使用するため、をロードする前にjQueryをロードする必要がありますapp.js。

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、挨拶が表示されます。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]