minista（ミニスタ）は、React(JSX)で書ける web コーディング用の小さいスタティックサイトジェネレーターです。
- ゼロコンフィグで始められる
- React(JSX)から静的な HTML を出力
- CSS と JavaScript を Minify 出力
- Next.js 風のディレクトリ構成
$ 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 React from "react" // Required!
import { render } from "minista" // Required!
const Home = () => {
return render( // Required!
<h1>Hello</h1>
)
}
export default Home# Start
$ minista
# Stop
Press Ctrl+C$ minista buildimport React from "react"
import { render, Comment } from "minista"
const Home = () => {
return render(
<>
<Comment text="Comment Test" />
<h1>Hello</h1>
</>
)
}
export default Home<body>
<!-- Comment Test -->
<h1>Hello</h1>
</body>納品用のサイトマップを簡単に作るコンポーネントを npm で追加可能です。納品物に追加の CSS や JavaScript をバンドルさせません。
プロジェクトの root に webpack.config.js を配置することで設定を追加できます。
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- Charge — an opinionated, zero-config static site generator
- Next.js by Vercel - The React Framework
- Node Interface | webpack
- テンプレートエンジンに React を使いつつ、きれいな HTML を生成したいんじゃ！！
- EJS をやめて React で HTML を書く
- MPA(マルチページアプリ)で webpack を使う
- MIT