@ywal123456/jskim 0.5.1 → 0.5.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +22 -11
- package/docs/JSKim_User_Guide_v0.5.2.pdf +0 -0
- package/docs/create-jskim.md +27 -12
- package/docs/user-guide/01-introduction.md +98 -0
- package/docs/user-guide/02-getting-started.md +162 -0
- package/docs/user-guide/03-project-structure.md +216 -0
- package/docs/user-guide/04-basic-workflow.md +186 -0
- package/docs/user-guide/05-cli-reference.md +218 -0
- package/docs/user-guide/06-configuration.md +357 -0
- package/docs/user-guide/07-files-pipeline.md +278 -0
- package/docs/user-guide/08-nunjucks.md +300 -0
- package/docs/user-guide/09-development-features.md +228 -0
- package/docs/user-guide/10-errors-and-troubleshooting.md +420 -0
- package/docs/user-guide/11-dashboard-example.md +188 -0
- package/docs/user-guide/12-crud-example.md +203 -0
- package/docs/user-guide/13-wizard-example.md +196 -0
- package/docs/user-guide/14-limitations.md +186 -0
- package/docs/user-guide/README.md +99 -0
- package/docs/user-guide-pdf-build.md +128 -0
- package/package.json +8 -1
- package/scripts/docs/build-user-guide-pdf.js +49 -0
- package/scripts/docs/user-guide-pdf-lib.js +825 -0
- package/scripts/docs/user-guide-print.css +286 -0
|
@@ -0,0 +1,186 @@
|
|
|
1
|
+
# 基本的な開発workflow
|
|
2
|
+
|
|
3
|
+
この章では、`build` / `watch` / `serve` / `dev` の違いと、日常開発での選び方を説明します。
|
|
4
|
+
個別 option の詳細は [CLIリファレンス](05-cli-reference.md) を参照してください。
|
|
5
|
+
|
|
6
|
+
## 全体の流れ
|
|
7
|
+
|
|
8
|
+
開発の基本的な流れは次のとおりです。
|
|
9
|
+
|
|
10
|
+
```text
|
|
11
|
+
src/sample/ を編集
|
|
12
|
+
↓
|
|
13
|
+
build または watch
|
|
14
|
+
↓
|
|
15
|
+
dist/sample/ へ output
|
|
16
|
+
↓
|
|
17
|
+
serve または dev で確認
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
`dev` は、初回の build、変更監視(watch)、静的サーバー(serve)、開発用の live reload をまとめて行う統合コマンドです。
|
|
21
|
+
日常の画面確認では、まず `dev` を使うのが簡単です。
|
|
22
|
+
|
|
23
|
+
## build
|
|
24
|
+
|
|
25
|
+
`build` は、いまの source から output を **1 回** 生成して終了します。
|
|
26
|
+
|
|
27
|
+
用途の例:
|
|
28
|
+
|
|
29
|
+
- production 向け output の確認
|
|
30
|
+
- 配布前の最終生成
|
|
31
|
+
- CI など、一度だけ成果物が欲しい場面
|
|
32
|
+
|
|
33
|
+
生成 project では次を使います。
|
|
34
|
+
|
|
35
|
+
```bash
|
|
36
|
+
npm run build
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
これは `jskim build sample` と同じです。
|
|
40
|
+
|
|
41
|
+
成功すると process は終了します(exit code `0`)。
|
|
42
|
+
設定や render の失敗などがあると、エラーを出して終了します(exit code `1`)。
|
|
43
|
+
|
|
44
|
+
既定では `build.clean` が `true` のため、build 前に `outputDir` を削除してから再生成します。
|
|
45
|
+
詳細は [設定](06-configuration.md) と [files pipeline](07-files-pipeline.md) を参照してください。
|
|
46
|
+
|
|
47
|
+
## watch
|
|
48
|
+
|
|
49
|
+
`watch` は source の変更を監視し、変更のたびに output を更新します。
|
|
50
|
+
|
|
51
|
+
```bash
|
|
52
|
+
npm run watch
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
これは `jskim watch sample` と同じです。
|
|
56
|
+
|
|
57
|
+
特徴:
|
|
58
|
+
|
|
59
|
+
- 初回に build を行い、その後も監視を続ける
|
|
60
|
+
- 開発用の静的サーバーは起動しない
|
|
61
|
+
- ブラウザへの配信や live reload は行わない
|
|
62
|
+
- `jskim.config.js` の変更も検知できる(概要。詳細は [開発機能](09-development-features.md))
|
|
63
|
+
|
|
64
|
+
「output だけを更新し続けたい」「サーバーは別手段で見る」場合に向きます。
|
|
65
|
+
|
|
66
|
+
## serve
|
|
67
|
+
|
|
68
|
+
`serve` は、すでに生成された `outputDir` を静的サーバーとして公開します。
|
|
69
|
+
|
|
70
|
+
```bash
|
|
71
|
+
npm run serve
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
これは `jskim serve sample` と同じです。
|
|
75
|
+
|
|
76
|
+
特徴:
|
|
77
|
+
|
|
78
|
+
- build や watch は自動では行わない
|
|
79
|
+
- source を編集しても自動では再 build しない
|
|
80
|
+
- 既定の host / port は `127.0.0.1` / `3000`
|
|
81
|
+
- CLI で `--host` / `--port` を指定できる
|
|
82
|
+
- `--open` は **サポートしていない**
|
|
83
|
+
|
|
84
|
+
既存の `dist/` を手元で確認したいときに使います。
|
|
85
|
+
最新の source を反映したい場合は、先に `build` するか、`dev` を使ってください。
|
|
86
|
+
|
|
87
|
+
## dev
|
|
88
|
+
|
|
89
|
+
`dev` は開発用の統合コマンドです。
|
|
90
|
+
|
|
91
|
+
```bash
|
|
92
|
+
npm run dev
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
これは `jskim dev sample` と同じです。
|
|
96
|
+
|
|
97
|
+
実際には次をまとめて行います。
|
|
98
|
+
|
|
99
|
+
1. 初回 build
|
|
100
|
+
2. source / config の監視と再 build
|
|
101
|
+
3. `outputDir` の静的サーバー
|
|
102
|
+
4. 開発用 live reload(既定で有効)
|
|
103
|
+
|
|
104
|
+
既定の URL:
|
|
105
|
+
|
|
106
|
+
```text
|
|
107
|
+
http://127.0.0.1:3000/
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
使える option の例:
|
|
111
|
+
|
|
112
|
+
```bash
|
|
113
|
+
jskim dev sample --host 127.0.0.1 --port 4000 --open
|
|
114
|
+
```
|
|
115
|
+
|
|
116
|
+
- `--host` / `--port` — 待ち受け設定(config より優先)
|
|
117
|
+
- `--open` — サーバー起動後にブラウザを開く(`dev` のみ)
|
|
118
|
+
|
|
119
|
+
source や設定の誤りがあっても、開発中の process をすぐ終了させない設計です。
|
|
120
|
+
error overlay や CSS soft reload の詳細は [開発機能](09-development-features.md) を参照してください。
|
|
121
|
+
|
|
122
|
+
## コマンドの選び方
|
|
123
|
+
|
|
124
|
+
| 目的 | 推奨コマンド |
|
|
125
|
+
| ---- | ------------ |
|
|
126
|
+
| 一度だけ output を作る | `build` |
|
|
127
|
+
| 変更を監視して output を更新し続ける | `watch` |
|
|
128
|
+
| 既存の `dist/` をブラウザで確認する | `serve` |
|
|
129
|
+
| 編集しながらブラウザで開発する | `dev` |
|
|
130
|
+
|
|
131
|
+
## 一般的な開発の順序
|
|
132
|
+
|
|
133
|
+
1. dependency を入れる
|
|
134
|
+
|
|
135
|
+
```bash
|
|
136
|
+
npm install
|
|
137
|
+
```
|
|
138
|
+
|
|
139
|
+
2. 開発サーバーを起動する
|
|
140
|
+
|
|
141
|
+
```bash
|
|
142
|
+
npm run dev
|
|
143
|
+
```
|
|
144
|
+
|
|
145
|
+
3. `src/sample/` を編集し、ブラウザで確認する
|
|
146
|
+
|
|
147
|
+
4. 配布用に最終 build する
|
|
148
|
+
|
|
149
|
+
```bash
|
|
150
|
+
npm run build
|
|
151
|
+
```
|
|
152
|
+
|
|
153
|
+
5. `dist/sample/` を確認する
|
|
154
|
+
|
|
155
|
+
配置先の手順は hosting 環境ごとに異なるため、このガイドでは扱いません。
|
|
156
|
+
|
|
157
|
+
## process の終了
|
|
158
|
+
|
|
159
|
+
`watch` / `serve` / `dev` は foreground で動き続けます。
|
|
160
|
+
終了するときは端末で `Ctrl+C` を送ります。
|
|
161
|
+
|
|
162
|
+
終了時は、サーバーや watcher を止めてから process が終わります。
|
|
163
|
+
成功時の停止では exit code `0` になります。
|
|
164
|
+
|
|
165
|
+
JSKim 自体に、外部 process manager のような常駐管理機能はありません。
|
|
166
|
+
|
|
167
|
+
## project が複数ある場合
|
|
168
|
+
|
|
169
|
+
`jskim.config.js` の `projects` に複数の名前がある場合は、コマンドに project 名を付けます。
|
|
170
|
+
|
|
171
|
+
```bash
|
|
172
|
+
jskim build siteA
|
|
173
|
+
jskim watch siteB
|
|
174
|
+
```
|
|
175
|
+
|
|
176
|
+
project が **1 件だけ** のときは、名前を省略できます。
|
|
177
|
+
**2 件以上** あるときに省略するとエラーになります。
|
|
178
|
+
|
|
179
|
+
例外として、`build` だけは次で全 project を実行できます。
|
|
180
|
+
|
|
181
|
+
```bash
|
|
182
|
+
jskim build --all
|
|
183
|
+
```
|
|
184
|
+
|
|
185
|
+
`watch` / `serve` / `dev` に `--all` はありません。
|
|
186
|
+
詳細な構文は [CLIリファレンス](05-cli-reference.md) を参照してください。
|
|
@@ -0,0 +1,218 @@
|
|
|
1
|
+
# CLIリファレンス
|
|
2
|
+
|
|
3
|
+
この章では、現在の JSKim CLI(binary 名 `jskim`)がサポートするコマンドと option をまとめます。
|
|
4
|
+
日常の選び方は [基本的な開発workflow](04-basic-workflow.md) を参照してください。
|
|
5
|
+
|
|
6
|
+
## 基本構文
|
|
7
|
+
|
|
8
|
+
```bash
|
|
9
|
+
jskim <command> [project] [options]
|
|
10
|
+
```
|
|
11
|
+
|
|
12
|
+
`project` と option の順序は入れ替えられます。
|
|
13
|
+
|
|
14
|
+
```bash
|
|
15
|
+
jskim serve --port 4000 sample
|
|
16
|
+
jskim serve sample --port 4000
|
|
17
|
+
jskim dev sample --open --host 127.0.0.1
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
ヘルプと version:
|
|
21
|
+
|
|
22
|
+
```bash
|
|
23
|
+
jskim --help
|
|
24
|
+
jskim -h
|
|
25
|
+
jskim help
|
|
26
|
+
jskim --version
|
|
27
|
+
jskim -v
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
## コマンド一覧
|
|
31
|
+
|
|
32
|
+
| command | 概要 |
|
|
33
|
+
| ------- | ---- |
|
|
34
|
+
| `build` | source から output を生成して終了する |
|
|
35
|
+
| `watch` | 初回 build のあと、変更を監視して再 build する |
|
|
36
|
+
| `serve` | 既存の `outputDir` を静的サーバーで公開する |
|
|
37
|
+
| `dev` | build + watch + serve + live reload の開発サーバー |
|
|
38
|
+
|
|
39
|
+
## project 引数
|
|
40
|
+
|
|
41
|
+
`project` は `jskim.config.js` の `projects` にあるキー名です。
|
|
42
|
+
|
|
43
|
+
例:
|
|
44
|
+
|
|
45
|
+
```js
|
|
46
|
+
projects: {
|
|
47
|
+
sample: {
|
|
48
|
+
sourceDir: 'src/sample',
|
|
49
|
+
outputDir: 'dist/sample',
|
|
50
|
+
},
|
|
51
|
+
}
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
このとき `jskim build sample` は `projects.sample` を対象にします。
|
|
55
|
+
|
|
56
|
+
| 状況 | 動作 |
|
|
57
|
+
| ---- | ---- |
|
|
58
|
+
| project が 1 件 | 名前を省略できる |
|
|
59
|
+
| project が 0 件 | エラー |
|
|
60
|
+
| project が 2 件以上で省略 | エラー(候補一覧を表示) |
|
|
61
|
+
| 存在しない名前を指定 | エラー |
|
|
62
|
+
|
|
63
|
+
エラーメッセージの詳細な読み方は [エラーとトラブルシュート](10-errors-and-troubleshooting.md) を参照してください。
|
|
64
|
+
|
|
65
|
+
## build
|
|
66
|
+
|
|
67
|
+
```bash
|
|
68
|
+
jskim build sample
|
|
69
|
+
jskim build --all
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
| 項目 | 内容 |
|
|
73
|
+
| ---- | ---- |
|
|
74
|
+
| project | 1 件指定、または 1 件だけのとき省略可 |
|
|
75
|
+
| `--all` | `projects` の全キーを定義順に実行 |
|
|
76
|
+
| project と `--all` の併用 | **不可** |
|
|
77
|
+
| 実行順(`--all`) | `Object.keys(projects)` の順 |
|
|
78
|
+
| 途中失敗 | resolve / build 失敗があっても次の project へ続行 |
|
|
79
|
+
| 最終 exit code | 1 件でも失敗があれば `1`、すべて成功なら `0` |
|
|
80
|
+
| 同一 / 入れ子の `outputDir` | `--all` では build 開始前に検査し、衝突なら中断 |
|
|
81
|
+
|
|
82
|
+
`--all` の衝突検査は、同じ path(Windows では大文字小文字を区別しない)や、厳密な祖先・子孫関係を拒否します。
|
|
83
|
+
似た prefix(例: `dist/site` と `dist/site-admin`)は許可されます。
|
|
84
|
+
|
|
85
|
+
> **Tip**
|
|
86
|
+
>
|
|
87
|
+
> project 名が `all` のときは `jskim build all` が 1 件 build です。
|
|
88
|
+
> 全件実行は必ず `jskim build --all` を使います。
|
|
89
|
+
|
|
90
|
+
## watch
|
|
91
|
+
|
|
92
|
+
```bash
|
|
93
|
+
jskim watch sample
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
| 項目 | 内容 |
|
|
97
|
+
| ---- | ---- |
|
|
98
|
+
| project | `build` と同じ選択規則 |
|
|
99
|
+
| 追加 option | なし |
|
|
100
|
+
| `--all` | **非対応** |
|
|
101
|
+
| 動作 | 初回 build 後、監視を継続 |
|
|
102
|
+
| 終了 | `Ctrl+C` など |
|
|
103
|
+
|
|
104
|
+
静的サーバーは起動しません。
|
|
105
|
+
|
|
106
|
+
## serve
|
|
107
|
+
|
|
108
|
+
```bash
|
|
109
|
+
jskim serve sample
|
|
110
|
+
jskim serve sample --host 127.0.0.1 --port 4000
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
| 項目 | 内容 |
|
|
114
|
+
| ---- | ---- |
|
|
115
|
+
| project | `build` と同じ選択規則 |
|
|
116
|
+
| `--host` | 待ち受け host |
|
|
117
|
+
| `--port` | 待ち受け port |
|
|
118
|
+
| 既定値 | config の `serve.host` / `serve.port`(未設定時は `127.0.0.1` / `3000`) |
|
|
119
|
+
| CLI と config | CLI 指定が優先 |
|
|
120
|
+
| `--open` | **非対応** |
|
|
121
|
+
| `--all` | **非対応** |
|
|
122
|
+
| build | 自動では行わない |
|
|
123
|
+
|
|
124
|
+
`port` は整数 `1`〜`65535` である必要があります。
|
|
125
|
+
`host` は空でない文字列である必要があります。
|
|
126
|
+
|
|
127
|
+
## dev
|
|
128
|
+
|
|
129
|
+
```bash
|
|
130
|
+
jskim dev sample
|
|
131
|
+
jskim dev sample --host 127.0.0.1 --port 4000 --open
|
|
132
|
+
```
|
|
133
|
+
|
|
134
|
+
| 項目 | 内容 |
|
|
135
|
+
| ---- | ---- |
|
|
136
|
+
| project | `build` と同じ選択規則 |
|
|
137
|
+
| `--host` / `--port` | `serve` と同じ |
|
|
138
|
+
| `--open` | 起動後にブラウザを開く(listen 成功後に 1 回) |
|
|
139
|
+
| `--all` | **非対応** |
|
|
140
|
+
| CLI と config | host / port は CLI が優先 |
|
|
141
|
+
|
|
142
|
+
`--open` でブラウザ起動に失敗した場合は warning を出し、開発サーバー自体は継続します。
|
|
143
|
+
listen に失敗した場合はブラウザ起動を試みず、process は失敗終了します。
|
|
144
|
+
|
|
145
|
+
## option 要約
|
|
146
|
+
|
|
147
|
+
| option | 使える command | 値 | 説明 |
|
|
148
|
+
| ------ | -------------- | -- | ---- |
|
|
149
|
+
| `--all` | `build` | なし | 全 project を順に build |
|
|
150
|
+
| `--host` | `serve`, `dev` | string | 待ち受け host |
|
|
151
|
+
| `--port` | `serve`, `dev` | string(検証後に整数) | 待ち受け port |
|
|
152
|
+
| `--open` | `dev` | なし | 起動後にブラウザを開く |
|
|
153
|
+
|
|
154
|
+
短縮形の option alias(例: `-p`)はありません。
|
|
155
|
+
`--help` / `-h`、`--version` / `-v` はコマンド前のグローバル用途です。
|
|
156
|
+
|
|
157
|
+
## 引数解析の規則
|
|
158
|
+
|
|
159
|
+
次の場合はエラーになります。
|
|
160
|
+
|
|
161
|
+
- 不明な option
|
|
162
|
+
- その command で使えない option(例: `serve` に対する `--open`)
|
|
163
|
+
- option 値の欠落(例: `--port` の直後が無い)
|
|
164
|
+
- option の重複
|
|
165
|
+
- `--port=4000` のような `=` 付き記法
|
|
166
|
+
- `--` 単独トークン
|
|
167
|
+
- positional 引数が 2 件以上
|
|
168
|
+
- `build` で project 名と `--all` の同時指定
|
|
169
|
+
|
|
170
|
+
option は project 名の前後どちらに置いても同じ結果です。
|
|
171
|
+
|
|
172
|
+
不正な port 値(`0`、`65536`、小数、非数値など)は拒否されます。
|
|
173
|
+
|
|
174
|
+
## exit code
|
|
175
|
+
|
|
176
|
+
| 状況 | exit code |
|
|
177
|
+
| ---- | --------- |
|
|
178
|
+
| help / version | `0` |
|
|
179
|
+
| 引数解析エラー | `1` |
|
|
180
|
+
| build 失敗(単一 / `--all` で 1 件以上失敗) | `1` |
|
|
181
|
+
| watch / serve / dev の起動失敗 | `1` |
|
|
182
|
+
| `Ctrl+C` などでの正常停止 | `0` |
|
|
183
|
+
| `dev --open` のブラウザ起動失敗 | process 自体は継続(失敗終了にはしない) |
|
|
184
|
+
|
|
185
|
+
長時間稼働中の `watch` / `dev` では、個別の再 build 失敗があっても process を維持します。
|
|
186
|
+
詳細なエラー表示は [エラーとトラブルシュート](10-errors-and-troubleshooting.md) と [開発機能](09-development-features.md) を参照してください。
|
|
187
|
+
|
|
188
|
+
## package script から使う
|
|
189
|
+
|
|
190
|
+
`create-jskim` が生成する `package.json` は、次の scripts を持ちます。
|
|
191
|
+
|
|
192
|
+
```json
|
|
193
|
+
{
|
|
194
|
+
"scripts": {
|
|
195
|
+
"build": "jskim build sample",
|
|
196
|
+
"watch": "jskim watch sample",
|
|
197
|
+
"serve": "jskim serve sample",
|
|
198
|
+
"dev": "jskim dev sample"
|
|
199
|
+
}
|
|
200
|
+
}
|
|
201
|
+
```
|
|
202
|
+
|
|
203
|
+
そのため、日常作業では次で足ります。
|
|
204
|
+
|
|
205
|
+
```bash
|
|
206
|
+
npm run build
|
|
207
|
+
npm run watch
|
|
208
|
+
npm run serve
|
|
209
|
+
npm run dev
|
|
210
|
+
```
|
|
211
|
+
|
|
212
|
+
CLI option を足すときは、package manager の引数渡し規則に従ってください。
|
|
213
|
+
例(npm):
|
|
214
|
+
|
|
215
|
+
```bash
|
|
216
|
+
npm run serve -- --port 4000
|
|
217
|
+
npm run dev -- --open --port 4000
|
|
218
|
+
```
|