https://github.com/pez/shadow-cljs-quickstart-browser
https://github.com/pez/shadow-cljs-quickstart-browser
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/pez/shadow-cljs-quickstart-browser
- Owner: PEZ
- Created: 2023-07-19T06:45:48.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2023-07-19T06:45:50.000Z (almost 3 years ago)
- Last Synced: 2025-01-26T04:25:15.690Z (over 1 year ago)
- Language: HTML
- Size: 4.88 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README-ja.md
Awesome Lists containing this project
README
# shadow-cljs - ブラウザ・クイックスタート
これはブラウザ上で動作するCLJSプロジェクトで利用できる最小限のテンプレートです。
## 必要なソフトウェア
- [node.js (v6.0.0+)](https://nodejs.org/en/download/)
- [Java JDK (8+)](http://www.oracle.com/technetwork/java/javase/downloads/index.html) または [Open JDK (8+)](http://jdk.java.net/10/)
## ユーザーガイド
このリポジトリでは、基本的なブラウザ向けのビルド方法を示します。
詳細は完全な[ユーザーガイド](https://shadow-cljs.github.io/docs/UsersGuide.html)をご参照ください。
## 例の実行
```bash
git clone https://github.com/shadow-cljs/quickstart-browser.git quickstart
cd quickstart
npm install
npx shadow-cljs server
```
以上により `shadow-cljs` サーバープロセスが実行され、以下のすべてのコマンドはこのプロセスに応答します。
このプロセスを実行したまま、新しいターミナルを開いて続行してください。
最初の起動は、すべての依存関係をダウンロードして準備作業を行う必要があるため、少し時間がかかります。
これが実行されると、すぐに始められます。
```txt
npx shadow-cljs watch app
```
これにより設定された `:app` ビルドのコンパイルが開始して、ファイルを変更するたびに再コンパイルします。
"Build completed." というメッセージが表示されたら、ビルドを使用する準備が整いました。
```txt
[:app] Build completed. (23 files, 4 compiled, 0 warnings, 7.41s)
```
では [http://localhost:8020](http://localhost:8020)を開きましょう。
このアプリは、最も便利な開発ツールが設定された基本的なスケルトンに過ぎません。
`shadow-cljs` の設定は `shadow-cljs.edn` でします。次のようなものです。
```clojure
;; 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` を呼び出します。
```html
Browser Starter
shadow-cljs - Browser
You need to enable JavaScript to run this app.
```
## ライブリロード
ライブリロードの動作を確認するには、`src/main/start/browser.cljs`を編集します。
ブラウザのコンソールにいくつかの出力が表示されます。
## REPL
開発時には、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` を変更する必要がなくなり、すべてをそのままテストすることができます。