Cursive で Diracのセットアップ

10533 ワード
Dirac ClojureScript Clojure Clojure テキストリンク

Chromeの開発者ツール上でClojureScriptのREPLを実行できるDiracというステキツールがあるんですが
今週Clojureの開発環境をEmacsからCursiveへ移行しようとした時になかなか動いてくれなかったので、
自分用のメモとして手順を残しておきます。

事前準備

  • Chrome Canary or Chromium をダウンロードする

  • ダウンロードしたブラウザをコマンドラインからパラメータを付与して起動

    /path/to/chromium/chrome --remote-debugging-port=9222 --no-first-run --user-data-dir=/path/to/chrome-profile

    profileのパスは新規のパスでも大丈夫だと思います。

  • ブラウザにDirac DevToolプラグインをインストール

project.cljを編集

  • :cljsbuild -> :builds -> :app -> :compiler -> :preloadsを追加する

    :cljsbuild
{:builds {:min
        {:source-paths ["src/cljs" "src/cljc" "env/prod/cljs"]
         :compiler
         {:output-to "target/cljsbuild/public/js/app.js"
          :output-dir "target/uberjar"
          :optimizations :advanced
          :pretty-print  false}}
        :app
        {:source-paths ["src/cljs" "src/cljc" "env/dev/cljs"]
         :compiler
         {:main "reagent-test.dev"
          :asset-path "/js/out"
          :output-to "target/cljsbuild/public/js/app.js"
          :output-dir "target/cljsbuild/public/js/out"
          :source-map true
          :optimizations :none
          :pretty-print  true
          :preloads [dirac.runtime.preload]}} ;; <-ここを追加

  • :profiles -> :dev -> :repl-options を編集

    :profiles {:dev {:repl-options {:init-ns reagent-test.repl
                            :port 8230                                ;; <- ここを追加
                            :init (do                                 ;; <- ここを追加
                                    (require 'dirac.agent)            ;; <- ここを追加
                                    (dirac.agent/boot!))              ;; <- ここを追加
                            :nrepl-middleware [dirac.nrepl/middleware ;; <- dirac.nrepl/middlewareをエントリに追加
                                               cemerick.piggieback/wrap-cljs-repl]}

  • :profiles -> :dev -> :dependencies にdiracのエントリを追加

    :profiles {:dev {
               ;; ...省略
               :dependencies [[ring/ring-mock "0.3.0"]
                              [ring/ring-devel "1.5.1"]
                              [prone "1.1.4"]
                              [figwheel-sidecar "0.5.9"]
                              [org.clojure/tools.nrepl "0.2.13"] ;; <- 0.2.12 から 0.2.13へ変更
                              [com.cemerick/piggieback "0.2.2-SNAPSHOT"]
                              [pjstadig/humane-test-output "0.8.1"]
                              [binaryage/dirac "RELEASE"] ;; <- ここを追加
               ;; ...省略

  • 変更のより具体的な内容はここを参照
    https://github.com/cyubachi/dirac-setup/commit/b8b75258d6ba4b0e8d86aed624a4e273f6c11f09

  • project.clj全体を見たい場合はここを参照
    https://github.com/cyubachi/dirac-setup/blob/b8b75258d6ba4b0e8d86aed624a4e273f6c11f09/project.clj

REPL(Dirac Agent)を起動

こんな感じで実行設定を作って実行

上手く行くとこうなる(多分右上に新しいウィンドウができます)

Figwheel REPLを起動

こんな感じの実行設定を作って実行 or コマンドラインから lein figwheel を実行

上手く行くとこうなる(多分下の部分の実行ウィンドウにコンソールが流れます)

本当はここもClojure REPLで実行設定を作りたかったんですが、
ここに書かれている法だとpreloadsを読むときにdiracが見つからないとか言う訳のわからないエラーが出たので断念しました。。。。

ブラウザでlocalhost:3449にアクセスしてDiracのアイコンをクリック


Dirac DevToolの拡張をインストールするとこんなアイコンが出てくるはずなのでこれをクリックします。
すると、Chromeの開発者ツールのようなものが立ち上がって、console画面からREPLを実行出来るようになります。
Ctrl + .で普通のJavascriptのコンソールとClojureScriptのREPLを切り替えられます。