minista

Site & Documentation

• https://minista.qranoko.jp

About

minista（ミニスタ）は React の JSX から綺麗な HTML を作るスタティックサイトジェネレーターです。

• すべての機能を Vite プラグインとして提供
• ビルド時に自動で Vite の「SSR ビルド + 通常ビルド」を実行

How To Use

Automatic Setup

$ npm create minista@latest

Manual Setup

$ npm install --save-dev minista vite react react-dom
$ touch ./minista.config.js
$ touch ./src/pages/index.jsx

// ./minista.config.js
import { pluginSsg } from "minista"

export default {
  plugins: [pluginSsg()],
}

// ./src/pages/index.jsx
export default function () {
  return <h1>Hello!</h1>
}

package.json を開き、以下のスクリプトを追加します。

"scripts": {
  "dev": "minista",
  "build": "minista build",
  "preview": "minista preview",
}

Commands

Vite の CLI コマンドとオプションがすべて使えます。

Config

Vite の設定がすべて使えます。コンフィグファイルは minista.config.{ts,js}・vite.config.{ts,js} のどちらでも動作し、defineConfig も使用できます。

// ./minista.config.ts
import { defineConfig, pluginSsg } from "minista"

export default defineConfig({
  plugins: [pluginSsg()],
})

minista は Vite の SSR ビルドと通常ビルドを連続で行うため、ビルドの一括設定がエラーに繋がる場合があります。これは設定を SSR ビルド用・通常ビルド用に切り分けることで解消できます。

// ./minista.config.ts
import { defineConfig, pluginSsg } from "minista"

const common = defineConfig({
  plugins: [pluginSsg()],
})

export default defineConfig(({ command, isSsrBuild }) => {
  if (command === "serve") return { ...common }
  if (command === "build" && isSsrBuild) return { ...common }
  if (command === "build" && !isSsrBuild) {
    return { ...common, build: { minify: false } }
  }
  return { ...common }
})

Plugins

minista の各機能は同封されているプラグインをコンフィグに登録することで動作します。使い方は各ディレクトリの README.md を参照ください。

• pluginSsg: React の JSX を静的な HTML に変換
• pluginMdx: MDX・Markdown を HTML の変換に対応させる
• pluginBundle: JSX 内で import した CSS・画像を出力
• pluginEntry: CSS・JS・画像をビルドプロセスに乗せる
• pluginImage: 画像を最適化・リモート画像をダウンロード
• pluginSvg: SVG ファイルを HTML にインライン展開
• pluginSprite: SVG ファイルを スプライト化して出力
• pluginComment: HTML にコメントを出力
• pluginIsland: ページの一部を React App 化
• pluginSearch: 全文検索機能を追加
• pluginBeautify: ビルド時に HTML・CSS・JS を整形
• pluginArchive: ビルド時に圧縮ファイルを生成

License

• MIT

Credit

• Author: Qrac
• Organization: QRANOKO