minista（ミニスタ）は、React (TSX/JSX)で書けるスタティックサイトジェネレーターです。SaaS の web テンプレートコーディング業務を想定し、ビルド時の納品用データが綺麗（ヒューマンリーダブル）であることを重視しています。CSS と JavaScript は個別に出力されます。
- ゼロコンフィグで始められる
- React (TSX/JSX)から 100%静的な HTML を出力
- CSS と JavaScript を個別に Minify 出力
- SVG スプライトアイコンを自動生成
- Next.js 風のディレクトリ構成
コマンド npm init minista を入力するだけでいくつかのテンプレートから選び始められます。テンプレートはオフィシャル以外にも任意の GitHub パブリックリポジトリに対応していますので、自分用のテンプレートを作っておくと効率的です。
# Use interactive CLI
npm init minista
# Use Official Template
npm init minista -- --template [OFFICIAL_TEMPLATE_NAME]
# Use GitHub Template
npm init minista -- --template [GITHUB_USER]/[REPO_NAME]
npm init minista -- --template [GITHUB_USER]/[REPO_NAME]/path/to/example手動でセッティングする場合は minista react react-dom をインストールしてください。
minista: npm
$ npm install --save-dev minista react react-dom# ----------------------------------------------------
# Directory Example
# ----------------------------------------------------
public # Copy root
src
├── assets
│ └── index.js # Required!
├── components
│ └── layout.js
└── pages # Required!
├── about
│ └── index.js
└── index.js//----------------------------------------------------
// Page Example
//----------------------------------------------------
import { render } from "minista" // Required!
const PageHome = () => {
return (
<h1>Hello</h1>
)
}
export default render(<PageHome />) // Required!webpack-dev-server でプレビューします。
# Start
$ minista
# Stop
Press Ctrl+C納品用にビルド。HTML には js-beautify 処理が施され見やすくなります。
$ minista build<Comment text="" /> を使うと React では作りにくい HTML コメントが残せます。
import { render, Comment } from "minista"
const PageHome = () => {
return (
<>
<Comment text="Comment Test" />
<h1>Hello</h1>
</>
)
}
export default render(<PageHome />)<body>
<!-- Comment Test -->
<h1>Hello</h1>
</body>納品用のサイトマップを簡単に作るコンポーネントを npm で追加可能です。納品物に追加の CSS や JavaScript をバンドルさせません。
プロジェクトの root に webpack.config.js を配置することで設定をマージできます。
//----------------------------------------------------
// Example: User > webpack.config.js
//----------------------------------------------------
// No installation required.
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const CopyPlugin = require("copy-webpack-plugin")
// Example of dev mode
const isDev = process.env.NODE_ENV !== "production"
const webpackConfig = {
// Merge
devServer: {
open: ["/index.html"],
},
// Replace
entry: { custom: "./src/assets/index.js" },
plugins: [
// Replace
new MiniCssExtractPlugin({
filename: "assets/css/[name].css",
}),
// Replace
new CopyPlugin({
patterns: [{ from: "./static", to: "./", noErrorOnMissing: true }],
}),
],
// All optimization is replaced.
optimization: {
minimize: !isDev,
minimizer: [
/* Replace plugins */
],
},
}
module.exports = webpackConfigTypeScript .tsx でページを作成する場合はモジュールを追加し tsconfig.json をプロジェクトの root に配置。エントリーポイントとして src/assets/index.ts があれば src/assets/index.js の代わりに使用します。
$ npm install --save-dev typescript @types/react @types/react-dom{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"baseUrl": ".",
"allowJs": true,
"strict": true,
"noImplicitAny": false,
"strictNullChecks": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noImplicitReturns": true,
"moduleResolution": "node",
"esModuleInterop": true,
"isolatedModules": false,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"resolveJsonModule": true,
"jsx": "react-jsx"
},
"include": ["**/*.ts", "**/*.tsx"],
"exclude": ["node_modules", "dist", "webpack.config.js"]
}# ----------------------------------------------------
# Directory Example
# ----------------------------------------------------
public # Copy root
src
├── assets
│ └── index.ts (or index.js) # Required!
├── components
│ └── layout.js
└── pages # Required!
├── about
│ └── index.tsx
└── index.tsxBabel はプロジェクトの root に .babelrc もしくは babel.config.js を配置することで設定を上書きできます。カスタマイズしない場合は以下の設定が適応されます。
// JavaScript
const babelJsxOptions = {
presets: [
"@babel/preset-env",
[
"@babel/preset-react",
{
runtime: "automatic",
},
],
],
}
// TypeScript
const babelTsxOptions = {
presets: [
"@babel/preset-env",
[
"@babel/preset-react",
{
runtime: "automatic",
},
],
["@babel/preset-typescript"],
],
}PostCSS はゼロコンフィグで以下のプラグインが適応されますが、プロジェクトの root に postcss.config.js を配置することで設定を上書きできます。
module.exports = {
plugins: [
"postcss-import",
"postcss-flexbugs-fixes",
"postcss-sort-media-queries",
"postcss-preset-env",
],
}sass-loader と sass（または node-sass）を追加することで使えます。
$ npm install --save-dev sass-loader sassプロジェクトに JavaScript が全く必要ない場合はエントリーポイントを CSS ファイルに変更します。これにより空の JavaScript ファイルを出力することなく納品用データを生成できます。
//----------------------------------------------------
// Example: User > webpack.config.js
//----------------------------------------------------
const webpackConfig = {
entry: { bundle: "./src/assets/index.css" },
}
module.exports = webpackConfigsrc/assets/icons ディレクトリに SVG ファイルを置くと SVG スプライトアイコンの dist/assets/icons.svg が生成されます。以下のようなコンポーネントを作ることでアイコンを呼び出せます。
// Example: ./src/components/svg-sprite-icon.tsx
export interface SvgSpriteIconProps {
iconId?: string;
}
export const SvgSpriteIcon = (props: SvgSpriteIconProps) => {
const { iconId } = props
return (
<svg className="icon" role="img">
<use xlinkHref={`/assets/icons.svg#${iconId}`} />
</svg>
)
}<!-- dist html -->
<svg role="img" class="icon">
<use xlink:href="/assets/icons.svg#star"></use>
</svg>- Next.js by Vercel - The React Framework
- Charge — an opinionated, zero-config static site generator
- Eleventy, a simpler static site generator.
- Node Interface | webpack
- natemoo-re/microsite
- Astro
- テンプレートエンジンに React を使いつつ、きれいな HTML を生成したいんじゃ！！
- EJS をやめて React で HTML を書く
- MPA(マルチページアプリ)で webpack を使う
- HTML コーディングでも React+TypeScript の開発体験を得る
- Astro と microCMS でポートフォリオサイトを作る
- MIT