JSPM

minista

0.11.1
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 412
  • Score
    100M100P100Q87334F
  • License MIT

Mini static site generator that can be written in React (JSX) for web coding

Package Exports

  • minista
  • minista/main.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (minista) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

minista

About

minista（ミニスタ）は、React(JSX)で書ける web コーディング用の小さいスタティックサイトジェネレーターです。

  • ゼロコンフィグで始められる
  • React(JSX)から静的な HTML を出力
  • CSS と JavaScript を Minify 出力
  • Next.js 風のディレクトリ構成

How To Use

npm

Setup

$ 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

Develop

# Start
$ minista

# Stop
Press Ctrl+C

Build

$ minista build

Components

Comment

Input

import React from "react"
import { render, Comment } from "minista"

const Home = () => {
  return render(
    <>
      <Comment text="Comment Test" />
      <h1>Hello</h1>
    </>
  )
}

export default Home

output

<body>
  <!-- Comment Test -->
  <h1>Hello</h1>
</body>

Sitemap

納品用のサイトマップを簡単に作るコンポーネントを npm で追加可能です。納品物に追加の CSS や JavaScript をバンドルさせません。

Customize

webpack

プロジェクトの root に webpack.config.js を配置することで設定をマージできます。

// Example
const webpackConfig = {
  devServer: {
    open: ["/index.html"],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "assets/custom.css",
    }),
    new CopyPlugin({
      patterns: [{ from: "./static", to: "./", noErrorOnMissing: true }],
    }),
  ],
  optimization: {
    minimizer: [
      /* All replacements */
    ],
  },
}

module.exports = webpackConfig

PostCSS

PostCSS はゼロコンフィグで以下のプラグインが適応されますが、プロジェクトの root に postcss.config.js を配置することで設定を上書きできます。

module.exports = {
  plugins: {
    "postcss-import": {},
    "postcss-flexbugs-fixes": {},
    "postcss-sort-media-queries": {},
    "postcss-preset-env": {},
  },
}

Sass / SCSS

sass-loader と sass（または node-sass）を追加することで使えます。

$ npm install --save-dev sass-loader sass

Media

Respect

License

  • MIT

Credit