Vite と VitePress のつなぎ込み #VitePress

はじめに

バージョン ... 0.2.0
SHA-1 ハッシュ ... 3d2f7e27dea15bab9b6100789c4e75f76d0048ad

概要

VitePress をどのようにして Vite につなぎ混んでいるかを見ていきます。起動するコマンドからはじめて、npx vitepress dev の場合はサーバの起動まで、npx vitepress build の場合は、html ファイルの出力までを見ていきます。

1. コマンドの書式

$ npx vitepress ... で起動するスクリプトです。

$ # 書式
$ npx vitepress [dev | build] [対象のディレクトリ] --port [ポート番号]
$
$ # 例
$ npx vitepress dev docs/ --port 3002

2. ライブラリ

/bin/vitepress.js で使用されているライブラリの動作を簡単に示します。

// chalk
//   console.log を色付けしてくれます。

// minimist
//   引数を解析してくれます。例えば、
//
//   以下のように打ち込んだとき...
//   $ npx vitepress dev docs/ --port 3002
//
//   以下のように解析されます。
//   const argv = require('minimist')(process.argv.slice(2))
//   argv === { _: [ 'dev', 'docs/' ], port: 3002 }
//
//   argv._[0] ... dev | build
//   argv._[1] ... 対象のディレクトリ
//   argv.port ... ポート番号

3. ソースコードと補足

/bin/vitepress.js

#!/usr/bin/env node
const chalk = require('chalk')
const argv = require('minimist')(process.argv.slice(2))


console.log(chalk.cyan(`vitepress v${require('../package.json').version}`))
console.log(chalk.cyan(`vite v${require('vite/package.json').version}`))


const command = argv._[0]

//
// 1) dev の場合
//      `createServer` して `server.listen` する。
//      server には Koa というライブラリを用いる。
//
if (!command || command === 'dev') {
  const port = argv.port || 3000
  const root = command === 'dev' && argv._[1]
  if (root) {
    argv.root = root
  }
  require('../dist/node')  // <--- ../src/node がトランスパイルされたものが保存されています。
    .createServer(argv)
    .then((server) => {
      server.listen(port, () => {
        console.log(`listening at http://localhost:${port}`)
      })
    })
    .catch((err) => {
      console.error(chalk.red(`failed to start server. error:\n`), err)
    })
//
// 2) build の場合
//      `build` する。
//
} else if (command === 'build') {
  require('../dist/node')
    .build(argv)
    .catch((err) => {
      console.error(chalk.red(`build error:\n`), err)
    })
} else {
  console.log(chalk.red(`unknown command "${command}".`))
}

vue/vitepress - /bin/vitepress.js

おわりに

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

Vite と VitePress のつなぎ込み - dev 編