PureScript ver. 0.7.0 以上で “ブラウザーで” Hello, World!

PureScript

先日の記事では Node で Hello, World! するところまでできた。では、それをブラウザーで動かすにはどうするんだって思って調べてうまくいったのでまとめる。

CommonJS

psc コマンドで吐いた Javascript には require 関数が使われてて複数のファイルに分かれていてこいつどうするんだって思ってたんだけど、これは CommonJS っていう仕様なのね。ブラウザーは CommonJS に対応してないので（全部がそうか調べたわけじゃないけど）こいつをなくす変換をする必要がある。

Browserify

「require ブラウザー」とかで検索すると Browserify （とか RequireJS）が引かっかるのでそれを使うのかと思ったんだけど、これを使わなくていいみたい。

psc-bundle

この Wiki「PureScript Without Node」に書いてあって psc-bundle コマンドを使えばいい。psc をインストールしたときについてきているはず。このコマンドを使うとモジュールに分かれた JS を1つにまとめた JS にしてくれる。

> psc-bundle output\*\*.js --module Main --main Main -o main.js

--module オプションと引数で、どのモジュールがエントリーポイントなのかを指定する。そのモジュールから辿れない関数は成果物から除去される。このオプションがなければ依存モジュールの全部の関数が成果物に含まれる。

--main オプションと引数で、実行される main 関数のあるモジュールを指定する。JS 読み込み時に実行したいわけではなかったらこのオプションは要らない。

-o オプションと引数でどのファイルに出力するかを指定する。なければ標準出力に出力される。

残りの引数には psc コマンドで生成された JS を指定する。

これで先日の Main.purs をコンパイルした JS をバンドルすると下記 JS が生成される。

// Generated by psc-bundle 0.7.1.0
var PS = { };
(function(exports) {
  /* global exports, console */
  "use strict";

  // module Control.Monad.Eff.Console

  exports.log = function (s) {
    return function () {
      console.log(s);
      return {};
    };
  };
 
})(PS["Control.Monad.Eff.Console"] = PS["Control.Monad.Eff.Console"] || {});
(function(exports) {
  // Generated by psc version 0.7.1.0
  "use strict";
  var $foreign = PS["Control.Monad.Eff.Console"];
  var Prelude = PS["Prelude"];
  var Control_Monad_Eff = PS["Control.Monad.Eff"];
  exports["log"] = $foreign.log;;
 
})(PS["Control.Monad.Eff.Console"] = PS["Control.Monad.Eff.Console"] || {});
(function(exports) {
  // Generated by psc version 0.7.1.0
  "use strict";
  var Control_Monad_Eff_Console = PS["Control.Monad.Eff.Console"];     
  var main = Control_Monad_Eff_Console.log("Hello, World!");
  exports["main"] = main;;
 
})(PS["Main"] = PS["Main"] || {});

PS["Main"].main();

そして下記の HTML ファイルを生成してブラウザーに読ませると無事ブラウザーのコンソールに Hello, World! が表示される。

<html><head><script type="text/javascript" src="main.js" ></script>

参考