Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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 のつなぎ込み
    1. dev 編
    2. build 編(未着手)

1. 概要

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

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

2. 詳細

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"
  ],

}

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

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

おわりに

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away