はじめに
- バージョン ... 0.2.0
- SHA-1 ハッシュ ... 3d2f7e27dea15bab9b6100789c4e75f76d0048ad
- VitePress のディレクトリ構成
- src/client/app と src/client/theme-default のつなぎ込み
- Markdown ファイルと src/client/app, Vue インスタンス本体のつなぎ込み
- Vite と VitePress のつなぎ込み <-- いまココです。
- dev 編
- 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}".`))
}
おわりに
以上になります。ありがとうございました。次は、以下の記事になります。