これはブラウザ上で動作するCLJSプロジェクトで利用できる最小限のテンプレートです。
このリポジトリでは、基本的なブラウザ向けのビルド方法を示します。
詳細は完全なユーザーガイドをご参照ください。
git clone https://github.com/shadow-cljs/quickstart-browser.git quickstart
cd quickstart
npm install
npx shadow-cljs server以上により shadow-cljs サーバープロセスが実行され、以下のすべてのコマンドはこのプロセスに応答します。
このプロセスを実行したまま、新しいターミナルを開いて続行してください。
最初の起動は、すべての依存関係をダウンロードして準備作業を行う必要があるため、少し時間がかかります。 これが実行されると、すぐに始められます。
npx shadow-cljs watch appこれにより設定された :app ビルドのコンパイルが開始して、ファイルを変更するたびに再コンパイルします。
"Build completed." というメッセージが表示されたら、ビルドを使用する準備が整いました。
[:app] Build completed. (23 files, 4 compiled, 0 warnings, 7.41s)では http://localhost:8020を開きましょう。
このアプリは、最も便利な開発ツールが設定された基本的なスケルトンに過ぎません。
shadow-cljs の設定は shadow-cljs.edn でします。次のようなものです。
;; shadow-cljs の設定
{:source-paths ; .cljs ファイルはここで指定します
["src/dev"
"src/main"
"src/test"]
:dependencies ; 後ほど説明します
[]
:dev-http ; http://localhost:8020 上で http 開発用サーバーを起動し、`public` をサーブします。
{8020 "public"}
:builds
{:app ; build identifier
{:target :browser
:output-dir "public/js"
:asset-path "/js"
:modules
{:main ; becomes public/js/main.js
{:init-fn starter.browser/init}}}}}この設定では、:target を :browser に設定した :app ビルドを定義します。
すべての出力は public/js に書き込まれます。
これはプロジェクトのルートからの相対パスです。つまり、shadow-cljs.edn の設定があるディレクトリからの相対パスです。
:modules は、出力をどのようにまとめるかを定義します。
今のところ、1つのファイルだけが必要です。
main モジュールは public/js/main.js に書き込まれ、:entrices のコードと、それらの依存関係をすべて含みます。
最後の部分は、http://localhost:8020 を開いたときに読み込まれる実際の index.html です。
この index ファイルは、生成された js/main.js をロードして、src/main/start/browser.cljs で定義された start.browser.init を呼び出します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/css/main.css">
<title>Browser Starter</title>
</head>
<body>
<h1>shadow-cljs - Browser</h1>
<div id="app"></div>
<noscript>You need to enable JavaScript to run this app.</noscript>
<script src="/js/main.js"></script>
</body>
</html>ライブリロードの動作を確認するには、src/main/start/browser.cljsを編集します。
ブラウザのコンソールにいくつかの出力が表示されます。
開発時には、REPLが非常に便利です。
コマンドラインからnpx shadow-cljs cljs-repl appを使用します。
shadow-cljs - config .../shadow-cljs.edn
shadow-cljs - connected to server
cljs.user=>
これで、ブラウザ上でコードを評価することができるようになりました（ブラウザを開いていることが前提です）。
試しに (js/alert "Hi.") を実行してみてください。
ここでたくさんの文字を入力するつもりなら、rlwrap npx shadow-cljs cljs-repl appを使用するとよいでしょう。
REPLを終了するには、CTRL+Cか、:repl/quitと入力します。
最初に始めた watch プロセスは、すべて開発のためのものです。
REPLや他のすべての開発ツールに必要なコードを注入しますが、
コードを「プロダクション」（つまり一般に公開すること）に投入する際には、そのようなコードは必要ありません。
releaseアクションは、すべての開発コードを削除し、コードをClosure Compilerに通して、最小化されたmain.jsファイルを生成します。
このファイルは watch で作成されたファイルを上書きするため、まず watch プロセスを停止する必要があります。
CTRL+Cでwatchプロセスを停止し、代わりにnpx shadow-cljs release appを実行します。
http://localhost:8020 を開くと、release のビルドが動作しているのを見ることができます。
通常だと、この時点で public ディレクトリを プロダクションの Web サーバにコピーします。
デフォルトの設定では、watch で作成された public/js/main.js を上書きしていることに注意してください。
リリースビルドに使用する別のパスを設定することもできますが、
出力を同じファイルに書き込むことでindex.html を変更する必要がなくなり、すべてをそのままテストすることができます。
lsof -i :8080 kill -9 [PIDの数字]