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?

Vite と VitePress のつなぎ込み

はじめに

  • バージョン ... 0.2.0
  • SHA-1 ハッシュ ... 3d2f7e27dea15bab9b6100789c4e75f76d0048ad
  1. VitePress のディレクトリ構成
  2. src/client/app と src/client/theme-default のつなぎ込み
  3. Markdown ファイルと src/client/app, Vue インスタンス本体のつなぎ込み
  4. Vite と VitePress のつなぎ込み <-- いまココです。
    1. dev 編
    2. build 編(未着手)

概要

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}".`))
}

おわりに

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

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