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
44 changes: 40 additions & 4 deletions docs/guides/zenn-editor/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,20 +4,56 @@ zenn-editor リポジトリで管理されているパッケージの開発ガ

## セットアップ

zenn-editor リポジトリは [lerna](https://github.com/lerna/lerna) によるモノレポ構成です。
zenn-editor リポジトリは [pnpm](https://pnpm.io/ja/) + [Turborepo](https://turbo.build/repo) + [lerna-lite](https://github.com/lerna-lite/lerna-lite) によるモノレポ構成です。

それぞれのプロジェクトは `./packages` に配置されています。

リポジトリをクローンし、プロジェクトルートで `yarn install` を実行することで、`./packages` にある全てのプロジェクトの依存モジュールがインストールされます。
リポジトリをクローンし、プロジェクトルートで `pnpm install` を実行することで、`./packages` にある全てのプロジェクトの依存モジュールがインストールされます。

```shell
$ git clone https://github.com/zenn-dev/zenn-editor.git
$ yarn install
$ pnpm install
```

同様に、テストやビルドもプロジェクトのルートで `yarn test``yarn build` を実行することで、`./packages` にある全てのプロジェクトに対して行うことができます。これは依存するモジュールに対するテストや動作確認をしたい時に便利です。
:::caution
上記のコマンドを実行するには、事前に pnpm のインストールが必要です。<br />
インストール方法: https://pnpm.io/ja/installation
:::


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

## ブランチ

- `canary`: 開発用のブランチです。通常は`canary`ブランチから新しいブランチを切って、PRで`canary`ブランチにマージします。マージされると、`X.Y.Z-alpha.0`のようなバージョンが自動的にリリースされます。
- `main`: リリース用のブランチです。通常は`canary`ブランチから`main`ブランチにマージします。マージされると、`X.Y.Z`のようなバージョンが自動的にリリースされます。


## Monorepo で使用しているライブラリ

zenn-editor では以下のライブラリを使用して、Monorepo 環境を構築しています。

### pnpm

**公式サイト:** https://pnpm.io/ja/

npm、yarn などと同じパッケージマネージャーです。
シンボリックリンクを利用した独自構成で node_modules を管理することにより、高速で安全なパッケージ管理を可能とします。
zenn-editor では、workspace 機能によって Monorepo のパッケージを管理しています。


### Turborepo

**公式サイト:** https://turbo.build/repo

管理している workspace を依存関係を考慮してコマンドを実行するツールです。
zenn-editor では、ビルドやテストなどを実行する時に使用しています。


### lerna-lite

**公式サイト:** https://github.com/lerna-lite/lerna-lite

[lerna](https://lerna.js.org/) から `version``publish` 機能だけを抜き出したバージョン管理ツールです。
基本的な使い方は lerna と一緒ですが、多くの Monorepo 機能はデフォルトでは含まれていないことに注意してください。
zenn-editor では、workspace をリリースする際に使用しています。
24 changes: 12 additions & 12 deletions docs/guides/zenn-editor/zenn-cli.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,27 +22,27 @@ zenn-cli は記事や本のテンプレートを作成するコマンドツー

## 開発環境

`yarn dev` を実行することでクライアントとサーバーが起動します。クライアントは [vite](https://vitejs.dev/) でホスティングされ、サーバーはExpressサーバーを [nodemon](https://nodemon.io/) で監視することで、ホットリロードを実現します。
`pnpm dev` を実行することでクライアントとサーバーが起動します。クライアントは [vite](https://vitejs.dev/) でホスティングされ、サーバーはExpressサーバーを [nodemon](https://nodemon.io/) で監視することで、ホットリロードを実現します。

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

`yarn build` でビルドを実行したうえで、`yarn zenn **` コマンドを実行します。
`pnpm build` でビルドを実行したうえで、`pnpm zenn **` コマンドを実行します。

```shell
$ yarn build
$ yarn zenn # = npx zenn
$ yarn zenn preview # = npx zenn preview (.mdの変更に伴うホットリロードも有効になります)
$ yarn zenn new:article --slug foo-bar-baz-qux # = npx zenn new:article --slug foo-bar-baz-qux
$ yarn zenn new:book --slug foo-bar-baz-qux # = npx zenn new:book --slug foo-bar-baz-qux
$ yarn zenn --help # = npx zenn --help
$ pnpm build
$ pnpm zenn # = npx zenn
$ pnpm zenn preview # = npx zenn preview (.mdの変更に伴うホットリロードも有効になります)
$ pnpm zenn new:article --slug foo-bar-baz-qux # = npx zenn new:article --slug foo-bar-baz-qux
$ pnpm zenn new:book --slug foo-bar-baz-qux # = npx zenn new:book --slug foo-bar-baz-qux
$ pnpm zenn --help # = npx zenn --help
```

## ビルド

`yarn build` で `./dist` に生成されたファイルをnpmのリリース時に含めるようにします。( `package.json` の `files` に指定)
`pnpm build` で `./dist` に生成されたファイルをnpmのリリース時に含めるようにします。( `package.json` の `files` に指定)

```shell
$ yarn build
$ pnpm build
```

### webpackの使用について
Expand All @@ -57,8 +57,8 @@ zenn-cli では、依存関係(package.json の dependencies)を無くすた

## テスト

`yarn test` で実行します。
`pnpm test` で実行します。

## lint

`yarn lint:fix` で実行します。
`pnpm lint:fix` で実行します。
4 changes: 2 additions & 2 deletions docs/guides/zenn-editor/zenn-content-css.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,11 @@ zenn-content-css は、 zenn-markdown-html で markdown から変換された HT

## 開発環境

`yarn dev` を実行することで、変更を検出して自動的に `./lib/index.css` にビルドファイルが生成されます。
`pnpm dev` を実行することで、変更を検出して自動的に `./lib/index.css` にビルドファイルが生成されます。

## ビルド

`yarn build` で実行します。
`pnpm build` で実行します。

## テスト

Expand Down
4 changes: 2 additions & 2 deletions docs/guides/zenn-editor/zenn-embed-elements.md
Original file line number Diff line number Diff line change
Expand Up @@ -132,12 +132,12 @@ zenn-embed-elements で変換された HTML:

## ビルド

`yarn build` で実行します。
`pnpm build` で実行します。

## テスト

未実装。

## lint

`yarn lint:fix` で実行します。
`pnpm lint:fix` で実行します。
6 changes: 3 additions & 3 deletions docs/guides/zenn-editor/zenn-markdown-html.md
Original file line number Diff line number Diff line change
Expand Up @@ -56,19 +56,19 @@ zenn-markdown-html は、Zenn独自の記法を含む markdown を HTML に変

## ビルド

`yarn build` で実行します。
`pnpm build` で実行します。

### Babelの使用について

zenn-markdown-html では、`PrismJS` の言語プラグインを予め全て読み込むために `babel-plugin-prismjs` を使用しているため、ソースコードのビルドには `babel` を使用し、型ファイル(*.d.ts)のビルドには `tsc` を使用してビルドしています。

## テスト

`yarn test` で実行します。
`pnpm test` で実行します。

## lint

`yarn lint:fix` で実行します。
`pnpm lint:fix` で実行します。

## 開発方針

Expand Down
6 changes: 3 additions & 3 deletions docs/guides/zenn-editor/zenn-validator.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,12 @@

## ビルド

`yarn build` で実行します。
`pnpm build` で実行します。

## テスト

`yarn test` で実行します。
`pnpm test` で実行します。

## lint

`yarn lint:fix` で実行します。
`pnpm lint:fix` で実行します。