More than 5 years have passed since last update.

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

Last updated at 2019-04-14Posted at 2019-04-08

手順メモ

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

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

本記事では、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にアクセスします。

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

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

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

$ yarn install
$ yarn run spago install

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