Edited at

PureScriptプロジェクトをバンドルしてブラウザで表示するメモ


手順メモ

タイトルがカタカナばっかりで嫌です。

ほぼ自分用の雑メモです。詳しいことは書いてません。でも超簡単です。

本記事では、yarnがグローバルインストールされていることを前提とします。

以下のコマンドを使います。

$ mkdir purs-js-test

$ cd purs-js-test
$ yarn init -y
$ yarn add -D purescript spago parcel-bundler
$ yarn run spago init
$ yarn run spago install

必須ではありませんが、PureScriptファイルで補完を使いたい場合は以下を実行すると良いです。一度ビルドした後から補完が有効になります。


※補完が必要な場合のみ

$ yarn add -D bower

$ yarn run bower init
$ yarn run bower install -D purescript-effect purescript-console purescript-prelude

次に、以下の2ファイルを用意します。


src/index.html

<html>

<body>
<script src="./index.js"></script>
</body>
</html>


src/index.js

require("../output/Main").main();



src/Main.purs

module Main where

import Prelude
import Effect (Effect)
import Effect.Console (log)

main :: Effect Unit
main = do
log "Hello world!"


以下のコマンドを使います。

$ yarn run spago build

$ yarn run parcel src/index.html -p 12345

ブラウザで以下のURLにアクセスします。

http://localhost:12345

F12を押して、コンソールに「Hello world!」と表示されていれば成功です。


依存パッケージのインストール方法

プロジェクトを配布するときには以下のファイル・ディレクトリを含めます。


  • package.json

  • packages.dhall

  • spago.dhall

  • yarn.lock

  • src/

  • test/

GitHubリポジトリなどのクローンで配布された側は、以下のコマンドを使うだけで依存パッケージをインストールできます。

$ yarn install

$ yarn run spago install

あとは前節に書いたビルド手順に従います。