LoginSignup
2

More than 5 years have passed since last update.

ParcelでReasonMLを体験する

Last updated at Posted at 2018-02-10

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2