minista 0.10.0 → 0.11.0

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.
Files changed (3) hide show
  1. package/README.md +25 -1
  2. package/cli.js +119 -70
  3. package/package.json +17 -17
package/README.md CHANGED
@@ -123,7 +123,31 @@ export default Home
123
123
 
124
124
  ### webpack
125
125
 
126
- プロジェクトの root に `webpack.config.js` を配置することで設定を追加できます。
126
+ プロジェクトの root に `webpack.config.js` を配置することで設定をマージできます。
127
+
128
+ ```js
129
+ // Example
130
+ const webpackConfig = {
131
+ devServer: {
132
+ open: ["/index.html"],
133
+ },
134
+ plugins: [
135
+ new MiniCssExtractPlugin({
136
+ filename: "assets/custom.css",
137
+ }),
138
+ new CopyPlugin({
139
+ patterns: [{ from: "./static", to: "./", noErrorOnMissing: true }],
140
+ }),
141
+ ],
142
+ optimization: {
143
+ minimizer: [
144
+ /* All replacements */
145
+ ],
146
+ },
147
+ }
148
+
149
+ module.exports = webpackConfig
150
+ ```
127
151
 
128
152
  ### PostCSS
129
153
 
package/cli.js CHANGED
@@ -1,78 +1,80 @@
1
1
  #!/usr/bin/env node
2
-
3
- //----------------------------------------------------
4
- // Global Require
5
- //----------------------------------------------------
6
-
7
2
  const fs = require("fs")
8
3
  const path = require("path")
9
4
  const glob = require("glob")
10
-
11
- //----------------------------------------------------
12
- // Variables
13
- //----------------------------------------------------
14
-
15
- const isDev = process.argv[2] !== "build"
16
- process.env.NODE_ENV = isDev ? "development" : "production"
17
-
18
- //----------------------------------------------------
19
- // webpack
20
- //----------------------------------------------------
21
-
22
5
  const webpack = require("webpack")
23
- const { merge } = require("webpack-merge")
6
+ const { mergeWithRules, unique } = require("webpack-merge")
24
7
  const webpackDevServer = require("webpack-dev-server")
25
- const HtmlWebpackPlugin = require("html-webpack-plugin")
26
-
27
- const webpackConfig = require("./webpack.config")
28
- const userWebpackConfig = fs.existsSync(path.resolve("webpack.config.js"))
29
- ? require(path.resolve("webpack.config"))
30
- : {}
31
- const mergedWebpackConfig = merge(webpackConfig, userWebpackConfig)
8
+ const beautify = require("js-beautify")
32
9
 
33
- const htmlPlugins = mergedWebpackConfig.plugins.filter(
34
- (plugin) => plugin.constructor === HtmlWebpackPlugin
35
- )
36
- const otherPlugins = mergedWebpackConfig.plugins.filter(
37
- (plugin) => plugin.constructor !== HtmlWebpackPlugin
38
- )
39
- const mergedHtmlPlugins = [
40
- ...new Map(
41
- htmlPlugins.map((plugin) => [plugin.userOptions?.template, plugin])
42
- ).values(),
43
- ]
44
- const mergedPlugins = [...mergedHtmlPlugins, ...otherPlugins]
45
- mergedWebpackConfig.plugins = mergedPlugins
10
+ function getWebpackConfig() {
11
+ return require("./webpack.config")
12
+ }
46
13
 
47
- const webpackCompiler = webpack(mergedWebpackConfig)
48
- const devServerOptions = Object.assign({}, mergedWebpackConfig.devServer)
14
+ function getUserWebpackConfig() {
15
+ if (fs.existsSync(path.resolve("webpack.config.js"))) {
16
+ return require(path.resolve("webpack.config"))
17
+ } else {
18
+ return {}
19
+ }
20
+ }
49
21
 
50
- const webpackDev = () => new webpackDevServer(webpackCompiler, devServerOptions)
22
+ function getMergedWebpackConfig({ config, userConfig }) {
23
+ const mergedConfig = mergeWithRules({
24
+ optimization: {
25
+ minimizer: "replace",
26
+ },
27
+ customizeArray: unique(
28
+ "plugins",
29
+ ["MiniCssExtractPlugin", "CopyPlugin"],
30
+ (plugin) => plugin.constructor && plugin.constructor.name
31
+ ),
32
+ })(config, userConfig)
33
+ console.log(mergedConfig)
34
+ const filterdPlugins = filterWebpackPlugins({
35
+ plugins: mergedConfig.plugins,
36
+ })
37
+ mergedConfig.plugins = filterdPlugins
38
+ return mergedConfig
39
+ }
51
40
 
52
- const webpackBuild = () =>
53
- webpackCompiler.run((err, stats) => {
54
- err && console.log(err)
55
- stats &&
56
- console.log(
57
- stats.toString({
58
- colors: true,
59
- })
60
- )
61
- beautifyHTML()
41
+ function filterWebpackPlugins({ plugins }) {
42
+ const filterdHtmlWebpackPlugins = filterHtmlWebpackPlugins({
43
+ plugins: plugins,
44
+ })
45
+ const filteredOtherWebpackPlugins = filterOtherWebpackPlugins({
46
+ plugins: plugins,
62
47
  })
48
+ return [...filterdHtmlWebpackPlugins, ...filteredOtherWebpackPlugins]
49
+ }
63
50
 
64
- //----------------------------------------------------
65
- // Beautify
66
- //----------------------------------------------------
51
+ function filterHtmlWebpackPlugins({ plugins }) {
52
+ const htmlWebpackPlugins = plugins.filter(
53
+ (plugin) => plugin.constructor.name === "HtmlWebpackPlugin"
54
+ )
55
+ const mergedHtmlWebpackPlugins = [
56
+ ...new Map(
57
+ htmlWebpackPlugins.map((plugin) => [plugin.userOptions.filename, plugin])
58
+ ).values(),
59
+ ]
60
+ return mergedHtmlWebpackPlugins
61
+ }
67
62
 
68
- const beautify = require("js-beautify")
69
- const beautifyOptions = {
70
- indent_size: 2,
71
- max_preserve_newlines: 0,
63
+ function filterOtherWebpackPlugins({ plugins }) {
64
+ const otherPlugins = plugins.filter(
65
+ (plugin) => plugin.constructor.name !== "HtmlWebpackPlugin"
66
+ )
67
+ return otherPlugins
72
68
  }
73
69
 
74
- const beautifyHTML = () => {
75
- glob.sync("dist/**/*.html").forEach((file) => {
70
+ function beautifyHtmlFiles({
71
+ htmlFilesPath,
72
+ beautifyOptions = {
73
+ indent_size: 2,
74
+ max_preserve_newlines: 0,
75
+ },
76
+ }) {
77
+ glob.sync(htmlFilesPath).forEach((file) => {
76
78
  fs.readFile(file, "utf8", (err, html) => {
77
79
  if (err) console.log(err)
78
80
  if (err) return
@@ -86,16 +88,63 @@ const beautifyHTML = () => {
86
88
  })
87
89
  }
88
90
 
89
- //----------------------------------------------------
90
- // Actions
91
- //----------------------------------------------------
91
+ function webpackBuildWithBeautify({
92
+ webpackCompiler,
93
+ runBeautify = true,
94
+ htmlFilesPath,
95
+ }) {
96
+ webpackCompiler.run((err, stats) => {
97
+ err && console.log(err)
98
+ stats &&
99
+ console.log(
100
+ stats.toString({
101
+ colors: true,
102
+ })
103
+ )
104
+ runBeautify && beautifyHtmlFiles({ htmlFilesPath: htmlFilesPath })
105
+ })
106
+ }
92
107
 
93
- switch (process.argv[2]) {
94
- case undefined:
95
- case "dev":
96
- return webpackDev().listen(8080)
97
- case "build":
98
- return webpackBuild()
99
- default:
108
+ function ministaCommand({
109
+ process,
110
+ webpackCompiler,
111
+ webpackDevServerOptions,
112
+ runBeautify,
113
+ htmlFilesPath,
114
+ }) {
115
+ if (process.argv[2] === undefined || process.argv[2] === "dev") {
116
+ const webpackDev = new webpackDevServer(
117
+ webpackDevServerOptions,
118
+ webpackCompiler
119
+ )
120
+ return webpackDev.start()
121
+ } else if (process.argv[2] === "build") {
122
+ return webpackBuildWithBeautify({
123
+ webpackCompiler: webpackCompiler,
124
+ runBeautify: runBeautify,
125
+ htmlFilesPath: htmlFilesPath,
126
+ })
127
+ } else {
100
128
  return console.log("Command error!\nminista dev or minista build")
129
+ }
101
130
  }
131
+
132
+ const isDev = process.argv[2] !== "build"
133
+ process.env.NODE_ENV = isDev ? "development" : "production"
134
+
135
+ const webpackConfig = getWebpackConfig()
136
+ const userWebpackConfig = getUserWebpackConfig()
137
+ const mergedWebpackConfig = getMergedWebpackConfig({
138
+ config: webpackConfig,
139
+ userConfig: userWebpackConfig,
140
+ })
141
+ const webpackCompiler = webpack(mergedWebpackConfig)
142
+ const webpackDevServerOptions = Object.assign({}, mergedWebpackConfig.devServer)
143
+
144
+ ministaCommand({
145
+ process: process,
146
+ webpackCompiler: webpackCompiler,
147
+ webpackDevServerOptions: webpackDevServerOptions,
148
+ runBeautify: true,
149
+ htmlFilesPath: "dist/**/*.html",
150
+ })
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": "0.10.0",
4
+ "version": "0.11.0",
5
5
  "bin": {
6
6
  "minista": "cli.js"
7
7
  },
@@ -48,27 +48,27 @@
48
48
  "react-dom": "^17.0.2"
49
49
  },
50
50
  "dependencies": {
51
- "@babel/core": "^7.15.0",
52
- "@babel/preset-env": "^7.15.0",
53
- "@babel/preset-react": "^7.14.5",
54
- "babel-loader": "^8.2.2",
55
- "copy-webpack-plugin": "^9.0.1",
56
- "css-loader": "^6.2.0",
57
- "css-minimizer-webpack-plugin": "^3.0.2",
58
- "glob": "^7.1.7",
51
+ "@babel/core": "^7.16.0",
52
+ "@babel/preset-env": "^7.16.4",
53
+ "@babel/preset-react": "^7.16.0",
54
+ "babel-loader": "^8.2.3",
55
+ "copy-webpack-plugin": "^10.0.0",
56
+ "css-loader": "^6.5.1",
57
+ "css-minimizer-webpack-plugin": "^3.2.0",
58
+ "glob": "^7.2.0",
59
59
  "html-replace-webpack-plugin": "^2.6.0",
60
- "html-webpack-plugin": "^5.3.2",
60
+ "html-webpack-plugin": "^5.5.0",
61
61
  "js-beautify": "^1.14.0",
62
- "mini-css-extract-plugin": "^2.2.0",
63
- "postcss": "^8.3.6",
62
+ "mini-css-extract-plugin": "^2.4.5",
63
+ "postcss": "^8.4.4",
64
64
  "postcss-flexbugs-fixes": "^5.0.2",
65
65
  "postcss-import": "^14.0.2",
66
- "postcss-loader": "^6.1.1",
67
- "postcss-preset-env": "^6.7.0",
68
- "postcss-sort-media-queries": "^3.11.12",
66
+ "postcss-loader": "^6.2.1",
67
+ "postcss-preset-env": "^7.0.1",
68
+ "postcss-sort-media-queries": "^4.2.1",
69
69
  "react-helmet": "^6.1.0",
70
- "webpack": "^5.50.0",
71
- "webpack-dev-server": "^4.0.0",
70
+ "webpack": "^5.64.4",
71
+ "webpack-dev-server": "^4.6.0",
72
72
  "webpack-merge": "^5.8.0"
73
73
  }
74
74
  }