VitePress のディレクトリ構成



## はじめに

* バージョン ... 0.1.1
* SHA-1 ハッシュ ... a3df035babe28fd086098fea26087fd3fbca17d0

1. [VitePress のディレクトリ構成 <-- いまココです。](https://qiita.com/domodomodomo/items/1048f51d98ab5fd52d12)
2. [src/client/app と src/client/theme-default のつなぎ込み](https://qiita.com/domodomodomo/items/49b1944f09f8f9f57519)
3. [Markdown ファイルと src/client/app, Vue インスタンス本体のつなぎ込み](https://qiita.com/domodomodomo/items/f44bf1f49cff511890c7)
4. [Vite と VitePress のつなぎ込み](https://qiita.com/domodomodomo/items/c3b828bf9f7cb7e9a18f)
  1. [dev 編](https://qiita.com/domodomodomo/items/aea100ae69344d6dcc39)
  2. build 編(未着手)

## 1. 概要

大きく分けて `bin`, `src`, `scripts` の 3 つからなります。


```
├── bin                     ... 1. 起動用のスクリプト
├── src                     ... 2. VitePress の本体
└── scripts                 ... 3. よくわからない
```




## 2. 詳細

２段、掘り下げます。`src` に着目してください。

```
├── bin                     ... 1. 起動用のスクリプト
│   └── vitepress.js
│
├── src                     ... 2. VitePress の本体
│   │   
│   ├── node                  ... 2.1. サーバ: Vite と app のつなぎ込みをここで行う。
│   │   ├── server.ts           ... 2.1.1. npx vitepress dev   の時は、こちらが起動する。
│   │   ├── build               ... 2.1.2. npx vitepress build の時は、こちらが起動する。
│   │   ...
│   │
│   └── client                ... 2.2. クライアント: Vue のインスタンスを作成する。
│       ├── app                 ... 2.2.1. VitePress の本体の中の本体
│       ├── theme-default       ... 2.2.2. VitePress のテーマ, ユーザは、これを上書きできる。
│       ...
│
└── scripts                 ... 3. よくわからない
    ├── copy.js
    ...
```

起動時の呼び出され方は、ざっくりと書くと、以下の通りです。

```
                       src/node/server.ts
bin/vitepress.js  -->                      -->  src/client/app  -->  src/client/theme-default
                       src/node/build
```



## 3. package.json

```javascript:package.json
{
  // エントリーポイントらしい。
  //   VitePress を直接 require することってないから...
  //   あまり関係ないのかな
  // > The main field is a module ID
  // > that is the primary entry point to your program.
  // > That is, if your package is named foo, and a user installs it,
  // > and then does require("foo"),
  // > then your main module’s exports object will be returned.
  "main": "dist/index.js",

  // 型定義ファイルかな？
  "types": "dist/index.d.ts",

  // コマンド 1
  //   npx vitepress ...
  "bin": {
    "vitepress": "bin/vitepress.js"
  },

  // コマンド 2
  //   npx dev ...
  //   npx build ...
  //   npx changelog ...
  //   npx prepublishiOnly ...
  //
  // bin と区別する。
  //   違いはよくわからない。
  "scripts": {
    "dev": "tsc -w -p src",
    "build": "rm -rf dist && tsc -p src",
    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
    "prepublishOnly": "yarn build && yarn changelog"
  },

  // > package.json の files フィールドは、
  // > 配布する npm モジュールに含めるべきファイルやディレクトリを
  // > 記述するフィールドで、まさにホワイトリストとして機能します。
  // > 具体的には npm モジュールに含めるファイル名やディレクトリ名を記述します。
  // > https://t-wada.hatenablog.jp/entry/nodejs-package-json-tips
  //
  // src -> dist に変化されます。
  "files": [
    "bin",
    "lib",
    "dist"
  ],

}
```

* [vue/vitepress - /package.json](https://github.com/vuejs/vitepress/blob/a3df035babe28fd086098fea26087fd3fbca17d0/package.json)

各プロパティの一覧は、ここにある。

* [npm-package.json](https://docs.npmjs.com/files/package.json)

bin を使ってコマンドにする方法は、ここ。いつか読みたい。

* [A guide to creating a NodeJS command-line package](https://medium.com/netscape/a-guide-to-create-a-nodejs-command-line-package-c2166ad0452e)


## おわりに
以上になります。ありがとうございました。次は、以下の記事になります。

* [src/client/app と src/client/theme-default のつなぎ込み](https://qiita.com/domodomodomo/items/49b1944f09f8f9f57519)