minista 1.0.0 → 1.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +40 -12
- package/cli.js +1 -0
- package/package.json +2 -2
- package/webpack.config.js +6 -1
package/README.md
CHANGED
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
|
|
15
15
|
## About
|
|
16
16
|
|
|
17
|
-
minista（ミニスタ）は、React (TSX/JSX)で書けるスタティックサイトジェネレーターです。SaaS の web テンプレートコーディング業務を想定し、ビルド時の納品用データが綺麗（ヒューマンリーダブル）であることを重視しています。
|
|
17
|
+
minista（ミニスタ）は、React (TSX/JSX)で書けるスタティックサイトジェネレーターです。SaaS の web テンプレートコーディング業務を想定し、ビルド時の納品用データが綺麗（ヒューマンリーダブル）であることを重視しています。CSS と JavaScript は個別に出力されます。
|
|
18
18
|
|
|
19
19
|
- ゼロコンフィグで始められる
|
|
20
20
|
- React (TSX/JSX)から 100%静的な HTML を出力
|
|
@@ -24,9 +24,29 @@ minista（ミニスタ）は、React (TSX/JSX)で書けるスタティックサ
|
|
|
24
24
|
|
|
25
25
|
## How To Use
|
|
26
26
|
|
|
27
|
-
###
|
|
27
|
+
### Automatic
|
|
28
28
|
|
|
29
|
-
|
|
29
|
+
コマンド `npm init minista` を入力するだけでいくつかのテンプレートから選び始められます。テンプレートは[オフィシャル](https://github.com/qrac/create-minista/tree/main/templates)以外にも任意の GitHub パブリックリポジトリに対応していますので、自分用のテンプレートを作っておくと効率的です。
|
|
30
|
+
|
|
31
|
+
```bash
|
|
32
|
+
# Use interactive CLI
|
|
33
|
+
npm init minista
|
|
34
|
+
|
|
35
|
+
# Use Official Template
|
|
36
|
+
npm init minista -- --template [OFFICIAL_TEMPLATE_NAME]
|
|
37
|
+
|
|
38
|
+
# Use GitHub Template
|
|
39
|
+
npm init minista -- --template [GITHUB_USER]/[REPO_NAME]
|
|
40
|
+
npm init minista -- --template [GITHUB_USER]/[REPO_NAME]/path/to/example
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
- `create-minista`: [repo](https://github.com/qrac/create-minista) / [npm](https://www.npmjs.com/package/create-minista)
|
|
44
|
+
|
|
45
|
+
### Manual
|
|
46
|
+
|
|
47
|
+
手動でセッティングする場合は `minista` `react` `react-dom` をインストールしてください。
|
|
48
|
+
|
|
49
|
+
- `minista`: [npm](https://www.npmjs.com/package/minista)
|
|
30
50
|
|
|
31
51
|
```bash
|
|
32
52
|
$ npm install --save-dev minista react react-dom
|
|
@@ -63,10 +83,14 @@ const PageHome = () => {
|
|
|
63
83
|
)
|
|
64
84
|
}
|
|
65
85
|
|
|
66
|
-
export default render(PageHome)
|
|
86
|
+
export default render(<PageHome />) // Required!
|
|
67
87
|
```
|
|
68
88
|
|
|
69
|
-
|
|
89
|
+
## Commands
|
|
90
|
+
|
|
91
|
+
### Develop
|
|
92
|
+
|
|
93
|
+
`webpack-dev-server` でプレビューします。
|
|
70
94
|
|
|
71
95
|
```bash
|
|
72
96
|
# Start
|
|
@@ -76,7 +100,9 @@ $ minista
|
|
|
76
100
|
Press Ctrl+C
|
|
77
101
|
```
|
|
78
102
|
|
|
79
|
-
|
|
103
|
+
### Build
|
|
104
|
+
|
|
105
|
+
納品用にビルド。HTML には `js-beautify` 処理が施され見やすくなります。
|
|
80
106
|
|
|
81
107
|
```bash
|
|
82
108
|
$ minista build
|
|
@@ -86,8 +112,9 @@ $ minista build
|
|
|
86
112
|
|
|
87
113
|
### Comment
|
|
88
114
|
|
|
89
|
-
|
|
115
|
+
`<Comment text="" />` を使うと React では作りにくい HTML コメントが残せます。
|
|
90
116
|
|
|
117
|
+
<!-- prettier-ignore -->
|
|
91
118
|
```js
|
|
92
119
|
import { render, Comment } from "minista"
|
|
93
120
|
|
|
@@ -100,11 +127,9 @@ const PageHome = () => {
|
|
|
100
127
|
)
|
|
101
128
|
}
|
|
102
129
|
|
|
103
|
-
export default render(PageHome)
|
|
130
|
+
export default render(<PageHome />)
|
|
104
131
|
```
|
|
105
132
|
|
|
106
|
-
#### output
|
|
107
|
-
|
|
108
133
|
```html
|
|
109
134
|
<body>
|
|
110
135
|
<!-- Comment Test -->
|
|
@@ -116,7 +141,7 @@ export default render(PageHome)
|
|
|
116
141
|
|
|
117
142
|
納品用のサイトマップを簡単に作るコンポーネントを npm で追加可能です。納品物に追加の CSS や JavaScript をバンドルさせません。
|
|
118
143
|
|
|
119
|
-
- minista
|
|
144
|
+
- `minista-sitemap`: [repo](https://github.com/qrac/minista-sitemap) / [npm](https://www.npmjs.com/package/minista-sitemap)
|
|
120
145
|
|
|
121
146
|
## Customize
|
|
122
147
|
|
|
@@ -141,10 +166,12 @@ const webpackConfig = {
|
|
|
141
166
|
devServer: {
|
|
142
167
|
open: ["/index.html"],
|
|
143
168
|
},
|
|
169
|
+
// Replace
|
|
170
|
+
entry: { custom: "./src/assets/index.js" },
|
|
144
171
|
plugins: [
|
|
145
172
|
// Replace
|
|
146
173
|
new MiniCssExtractPlugin({
|
|
147
|
-
filename: "assets/[name].css",
|
|
174
|
+
filename: "assets/css/[name].css",
|
|
148
175
|
}),
|
|
149
176
|
// Replace
|
|
150
177
|
new CopyPlugin({
|
|
@@ -316,6 +343,7 @@ export const SvgSpriteIcon = (props: SvgSpriteIconProps) => {
|
|
|
316
343
|
|
|
317
344
|
## Media
|
|
318
345
|
|
|
346
|
+
- [React で書ける SSG 改善点と今後について - minista v1](https://zenn.dev/qrac/articles/a24de970148c7e)
|
|
319
347
|
- [React(JSX)で書けるコーディング用 SSG - minista v0](https://zenn.dev/qrac/articles/7537521afcd1bf)
|
|
320
348
|
|
|
321
349
|
## Respect
|
package/cli.js
CHANGED
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "minista",
|
|
3
3
|
"description": "Mini static site generator that can be written in React (JSX) for web coding",
|
|
4
|
-
"version": "1.
|
|
4
|
+
"version": "1.1.1",
|
|
5
5
|
"bin": {
|
|
6
6
|
"minista": "cli.js"
|
|
7
7
|
},
|
|
@@ -63,7 +63,7 @@
|
|
|
63
63
|
"html-replace-webpack-plugin": "^2.6.0",
|
|
64
64
|
"html-webpack-plugin": "^5.5.0",
|
|
65
65
|
"js-beautify": "^1.14.0",
|
|
66
|
-
"mini-css-extract-plugin": "^2.
|
|
66
|
+
"mini-css-extract-plugin": "^2.5.2",
|
|
67
67
|
"postcss": "^8.4.5",
|
|
68
68
|
"postcss-flexbugs-fixes": "^5.0.2",
|
|
69
69
|
"postcss-import": "^14.0.2",
|
package/webpack.config.js
CHANGED
|
@@ -229,7 +229,12 @@ const webpackConfig = {
|
|
|
229
229
|
}),
|
|
230
230
|
new CopyPlugin({
|
|
231
231
|
patterns: [
|
|
232
|
-
{
|
|
232
|
+
{
|
|
233
|
+
from: "./public",
|
|
234
|
+
to: path.resolve("dist"),
|
|
235
|
+
noErrorOnMissing: true,
|
|
236
|
+
info: { minimized: true },
|
|
237
|
+
},
|
|
233
238
|
],
|
|
234
239
|
}),
|
|
235
240
|
],
|