Edited at

ParcelでReasonMLを体験する

More than 1 year has passed since last update.

facebookが開発しているOCamlライクなAltJSである ReasonML という言語があります。

強力な型、イミュータブルを特徴としていて、堅牢なフロントエンドを書くときに良さそうです。

公式のチュートリアルがあるのですが、Node.jsでの動作が主軸で、フロントエンドの開発については詳しく触れられていません。

https://reasonml.github.io/docs/en/quickstart-javascript.html

ありがたいことにParcelがReasonMLに対応しているので、設定ファイルなしでReasonMLを体験できます!


動作確認環境


  • OS: Archlinux

  • Node.js: v8.9.4

  • npm: v5.6.0


インストール

適当なディレクトリを作成して、


  • bs-platform(ReasonMLのビルドツール)

  • parcel-bundler

をローカルにインストールします。


bs-platform

$ mkdir parcel_reason 

$ cd parcel_reason
$ npm init -f
$ npm install bs-platform --save


ReasonMLプロジェクトの初期化

bs-platformが用意しているbsbコマンドでReasonMLプロジェクトの初期化を行います。

(bsconfig.jsonの生成、package.jsonの生成、フォルダの作成など)

$ npx bsb -init . -theme basic-reason


parcel

bsb -initによってpackage.jsonも初期化されてしまうので、このタイミングでParcelをインストールします。

$ npm install parcel-bundler --save

(各バージョンは2018年2月11日時点で、parce-bundlerが1.5.1、bs-platformが2.1.0でした)


ソースコード

必要最低限のhtmlファイルを用意します。


index.html

<!DOCTYPE html>

<html>
<head>
<script src="src/index.re">
</script>
</head>
<body>
</body>
</html>

srcディレクトリにReasonMLファイルを作成します。


src/index.re

Js.log("hello world!");



実行

Parcelを起動し、ブラウザでlocalhost:1234にアクセスして、デベロッパツールを開くとコンソールにhello world!が出力されています!

$ npx parcel


アンインストール

npmでローカルにインストールしているので、フォルダごと削除すればアンインストールできます。

$ cd ../

$ rm -rf parce_reason


ハマったこと

Parcel自体のバグではないのですが、テキストエディタのsafe-writeという機能で、HotModuleがうまく動作しませんでした。

下記に各エディタごとの対応方法が書いてあるので、必要に応じて設定すると良いと思います。

https://en.parceljs.org/hmr.html#safe-write