VitePress のディレクトリ構成

はじめに

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

1. VitePress のディレクトリ構成 <-- いまココです。
2. src/client/app と src/client/theme-default のつなぎ込み
3. Markdown ファイルと src/client/app, Vue インスタンス本体のつなぎ込み
4. Vite と VitePress のつなぎ込み
5. dev 編
6. 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

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

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

• npm-package.json

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

• A guide to creating a NodeJS command-line package

おわりに

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

• src/client/app と src/client/theme-default のつなぎ込み