Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 11 additions & 1 deletion docs/guides/zenn-editor/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,9 +24,14 @@ pnpm のインストールには corepack を使用することを推奨しま
corepack を使用しない場合は、corepack の[インストール方法](https://pnpm.io/ja/installation)を参照してインストールしてください。
:::


同様に、テストやビルドもプロジェクトのルートで `pnpm test`、`pnpm build` を実行することで、`./packages` にある全てのプロジェクトに対して行うことができます。これは依存するモジュールに対するテストや動作確認をしたい時に便利です。

AIコーディングエージェント向けのファイル管理には[rulesync](https://github.com/dyoshikawa/rulesync)を使用しています。次のコマンドを実行することで、主要なAIコーディングエージェントに対応した設定ファイルが生成されます。

```bash
npx rulesync generate
```

## ブランチ

- `canary`: 開発用のブランチです。新しいブランチを作る場合は、`canary`ブランチから作成します。`canary`の最新は `X.Y.Z-alpha.0` のようなバージョン指定または `@canary` でインストールすることができます。
Expand Down Expand Up @@ -72,3 +77,8 @@ zenn-editor では、ビルドやテストなどを実行する時に使用し
[lerna](https://lerna.js.org/) から `version` と `publish` 機能だけを抜き出したバージョン管理ツールです。
基本的な使い方は lerna と一緒ですが、多くの Monorepo 機能はデフォルトでは含まれていないことに注意してください。
zenn-editor では、workspace をリリースする際に使用しています。

## 動作確認

- `zenn-cli` は `zenn-content-css` `zenn-embed-elements` `zenn-markdown-html` `zenn-model` に依存しているため、 `zenn-cli` の動作確認をすることで、これらのパッケージの動作確認も行うことができます。
- `zenn-cli` の動作確認方法は [zenn-cli](./zenn-cli.md) を参照してください。
21 changes: 14 additions & 7 deletions docs/guides/zenn-editor/zenn-cli.md
Original file line number Diff line number Diff line change
Expand Up @@ -26,22 +26,29 @@ zenn-cli は記事や本のテンプレートを作成するコマンドツー

### その他のコマンドを開発環境で動かす

`pnpm build` でビルドを実行したうえで、`pnpm exec:zenn **` コマンドを実行します。
`pnpm build` でビルドを実行したうえで、`pnpm -C ./packages/zenn-cli exec:zenn **` コマンドを実行します。
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

プロジェクトルートから実行できるコマンドを案内した方がいいように思う

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

pnpm build このコマンドってどこで実行するんでしたっけ…?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

プロジェクトルートか

Copy link
Contributor Author

@cm-dyoshikawa cm-dyoshikawa Oct 27, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

です!


```shell
# すべてプロジェクトルートで実行
$ pnpm build
$ pnpm exec:zenn # = npx zenn
$ pnpm exec:zenn preview # = npx zenn preview (.mdの変更に伴うホットリロードも有効になります)
$ pnpm exec:zenn new:article --slug foo-bar-baz-qux # = npx zenn new:article --slug foo-bar-baz-qux
$ pnpm exec:zenn new:book --slug foo-bar-baz-qux # = npx zenn new:book --slug foo-bar-baz-qux
$ pnpm exec:zenn --help # = npx zenn --help
$ pnpm -C ./packages/zenn-cli exec:zenn # = npx zenn
$ pnpm -C ./packages/zenn-cli exec:zenn preview # = npx zenn preview (.mdの変更に伴うホットリロードも有効になります)
$ pnpm -C ./packages/zenn-cli exec:zenn new:article --slug foo-bar-baz-qux # = npx zenn new:article --slug foo-bar-baz-qux
$ pnpm -C ./packages/zenn-cli exec:zenn new:book --slug foo-bar-baz-qux # = npx zenn new:book --slug foo-bar-baz-qux
$ pnpm -C ./packages/zenn-cli exec:zenn --help # = npx zenn --help
```

### 環境変数を設定する

zenn-cli ではビルドに必要な情報の一部を環境変数で設定します。
開発中に全ての機能を使いたい場合は、`./packages/zenn-cli/.env` ファイルを作成し以下のように設定します。

```bash
cp ./packages/zenn-cli/.env.example ./packages/zenn-cli/.env
```

内容は以下のようになります。

```bash
# 埋め込みサーバーのオリジン(viteにも対応するために`VITE_`をつけてます)
VITE_EMBED_SERVER_ORIGIN="https://embed.zenn.studio"
Expand All @@ -61,7 +68,7 @@ $ pnpm build

### webpackの使用について

zenn-cli では、依存関係(package.json の dependencies)を無くすため [webpack](https://webpack.js.org) でバンドルしたファイルをリリースしています。
zenn-cli では、依存関係(package.json の dependencies)を無くすため [webpack](https://webpack.js.org)互換の[rspack](https://rspack.rs/)でバンドルしたファイルをリリースしています。

依存関係を無くす理由は以下の通りです。

Expand Down