Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

Cursive で Diracのセットアップ

More than 3 years have passed since last update.

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)を起動

こんな感じで実行設定を作って実行
範囲を選択_189.png

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

image

Figwheel REPLを起動

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

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

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

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

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away