使いはじめる
まず、MockKit を使うためのツールである MockKit CLI を導入します。
必要なもの
インストール
MockKit CLI はインストールしなくても使用できます:
sh
$ npx @mockkit/clish
$ yarn dlx @mockkit/clish
$ pnpm dlx @mockkit/cli自分の静的サイトジェネレータプロジェクトにインストールするには:
sh
$ npm install --save-dev @mockkit/clish
$ yarn add -D @mockkit/clish
$ pnpm add -D @mockkit/cliもしくは、グローバルにインストールすることもできます:
sh
$ npm install -g @mockkit/clish
$ yarn global add @mockkit/clish
$ pnpm add -g @mockkit/cliここからのサンプルコマンドは、以下の想定で記します。他の方法で使っている場合には、適宜コマンドを読み替えてください。
- MockKit CLI をインストールせずに使用する
- パッケージマネージャに npm を使用する
例
ヘルプを表示するコマンドを例に取ります。
インストールせずに使う場合
sh
$ npx @mockkit/cli --helpsh
$ yarn dlx @mockkit/cli --helpsh
$ pnpm dlx @mockkit/cli --helpプロジェクトにインストール済みの場合
sh
$ npm exec mockkit --helpsh
$ yarn exec mockkit --helpsh
$ pnpm exec mockkit --helpグローバルにインストールした場合
sh
$ mockkit --helpsh
$ mockkit --helpsh
$ mockkit --help初期設定
静的サイトジェネレータを使って作られた既存のプロジェクトに MockKit の初期設定を行います。
sh
$ cd /path/to/your/project
$ npx @mockkit/cli init対話式のセットアップスクリプトが実行されます。
✔ Enter the project name Your First Project
✔ Select the static site generator you are using Other (manual setup)
✔ Enter the destination directory ./dist
✔ Enter the public directory ./public
✔ Enter the development server port 3000
✔ Enter the development server command npm run dev
✔ Enter the static site generation command npm run generate
🎉 [SUCCESS] MockKit project initialized!
mockkit.json created at /path/to/your/project/mockkit.json| 質問項目 | 説明 |
|---|---|
| Enter the project name | プロジェクト名（サイト名）を入力します。 |
| Select the static site generator you are using | このプロジェクトで使っている静的サイトジェネレータを選択します。現在は Nuxt のみ選択でき、それ以外の場合は手動設定（Other (manual setup)）を選択します。 |
| Enter the destination directory | 静的サイトジェネレータがビルド結果を出力するディレクトリを入力します。 |
| Enter the public directory | 静的サイトジェネレータにとってのサイトのルート（robots.txt などを置く場所）に相当するディレクトリを入力します。 |
| Enter the development server port | 静的サイトジェネレータが立ち上げる開発サーバのポートを入力します。 |
| Enter the development server command | 静的サイトジェネレータの開発サーバを起動するためのコマンドを入力します。 |
| Enter the static site generation command | 静的サイトジェネレータの静的サイトをビルドするためのコマンドを入力します。 |
完了すると、（mockkit.json）が出力されます。init コマンドが行うことはこのファイルを出力することのみで、他のことは行いません。
開発サーバの起動
sh
$ npx @mockkit/cli devこのコマンドで開発サーバが起動します。
具体的には、そのプロジェクトの静的サイトジェネレータの開発サーバと MockKit の Viewer サーバの両方の起動を行います。
起動すると、ターミナル上に以下のようなログが出力されます。
+-----------------------------------------+
| MockKit Viewer is running on port 8787. |
| Viewer URL: http://localhost:8787/~/ |
+-----------------------------------------+Viewer サーバは、デフォルトで http://localhost:8787 で起動します。起動後は、ブラウザで http://localhost:8787/~/ にアクセスすることで、MockKit の Viewer を使用することができます。