feat: update scaffold (#4)

* chore: update prettierc

* chore: add rimraf

* chore: remove useless fields

* chore: remove lerna clean script

* feat: build umd, umd:min

* feat: add sourcemap

* feat: add devServer open

* feat: use yarn workspaces run command

* feat: omit rootPath in path.resolve

* feat: update babel-loader cacheDirectory

* feat: remove webpack.definePlugin

* feat: remove $schema for package.json and tsconfig.json

* feat: remove ENV.LIBRARY_NAME

* feat: use run-p exec build:*

* feat: add fork-ts-checker-plugin in dev mode

* feat: remove optimize-css-assets-webpack-plugin

* feat: add postcss-preset-env

* feat: add typed-css-modules-webpack-plugin

* feat: use @mjolnir/prettier-config

Author: leohxj

.eslintignore

@@ -1 +1,2 @@
 dist/
+**/*.less.d.ts

.lintstagedrc

@@ -1,6 +1,6 @@
 {
   "$schema": "http://json.schemastore.org/lintstagedrc.schema",
-  "**/*.{js, ts, jsx, tsx}": ["prettier --write", "eslint --fix", "git add"],
+  "**/*.{js, ts, jsx, tsx}": ["eslint --fix", "git add"],
   "**/*.{less, css}": ["prettier --write", "git add"],
   "**/*.{json, html, md}": ["prettier --write", "git add"]
 }

.postcssrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    'postcss-preset-env': {},
+  },
+};

.prettierrc

@@ -0,0 +1,6 @@
+'use strict';
+
+module.exports = {
+  ...require("@mjolnir/prettier-config")
+  // override edge case
+}

.prettierrc.js

@@ -1,13 +1,26 @@
 {
   "eslint.validate": [
-    { "language": "javascript", "autoFix": true },
-    { "language": "javascriptreact", "autoFix": true },
-    { "language": "typescript", "autoFix": true },
-    { "language": "typescriptreact", "autoFix": true }
+    {
+      "language": "javascript",
+      "autoFix": true
+    },
+    {
+      "language": "javascriptreact",
+      "autoFix": true
+    },
+    {
+      "language": "typescript",
+      "autoFix": true
+    },
+    {
+      "language": "typescriptreact",
+      "autoFix": true
+    }
   ],
   "cSpell.words": [
-    "repo",
     "mjolnir",
-    "mjolnirjs"
+    "mjolnirjs",
+    "repo",
+    "unpkg"
   ]
 }

.vscode/settings.json

@@ -1,2 +1,7 @@
 # yab-dev-tools
 TBD.
+
+
+## useage
+- `yarn`
+- `yarn start` or `yarn start:ui`

README.md

@@ -1,10 +1,13 @@
 'use strict';
+const path = require('path');
 
 const rootPath = process.cwd();
+const pkg = require(`${rootPath}/package.json`);
 
 module.exports = {
   rootPath,
-  srcPath: `${rootPath}/src`,
-  distPath: `${rootPath}/dist`,
-  publicPath: `${rootPath}/public`
+  srcPath: path.resolve('src'),
+  distPath: path.resolve('dist'),
+  publicPath: path.resolve('public'),
+  libraryName: pkg.name,
 };

config/env.js

@@ -0,0 +1,29 @@
+'use strict';
+
+const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
+
+const env = require('../../env');
+
+module.exports = {
+  entry: env.srcPath,
+  resolve: {
+    extensions: ['.ts', '.tsx', '.js', '.json'],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        exclude: /node_modules/,
+        use: [
+          {
+            loader: 'babel-loader',
+            options: {
+              cacheDirectory: true,
+            },
+          },
+        ],
+      },
+    ],
+  },
+  plugins: [new CaseSensitivePathsPlugin()],
+};

config/webpack/lib/webpack.config.base.js

@@ -0,0 +1,19 @@
+'use strict';
+const path = require('path');
+const merge = require('webpack-merge');
+
+const baseConfig = require('./webpack.config.base');
+const env = require('../../env');
+
+const developmentConfig = merge(baseConfig, {
+  mode: 'development',
+  devtool: 'cheap-eval-source-map',
+  output: {
+    filename: `${env.libraryName}.development.js`,
+    path: path.resolve(env.distPath, 'umd'),
+    library: env.libraryName,
+    libraryTarget: 'umd',
+  },
+});
+
+module.exports = developmentConfig;

config/webpack/lib/webpack.config.development.js

@@ -0,0 +1,22 @@
+'use strict';
+const path = require('path');
+const merge = require('webpack-merge');
+const TerserPlugin = require('terser-webpack-plugin');
+
+const baseConfig = require('./webpack.config.base');
+const env = require('../../env');
+
+const productionConfig = merge(baseConfig, {
+  mode: 'production',
+  output: {
+    filename: `${env.libraryName}.production.js`,
+    path: path.resolve(env.distPath, 'umd'),
+    library: env.libraryName,
+    libraryTarget: 'umd',
+  },
+  optimization: {
+    minimizer: [new TerserPlugin()],
+  },
+});
+
+module.exports = productionConfig;

config/webpack/lib/webpack.config.production.js

@@ -1,28 +1,28 @@
 'use strict';
+const path = require('path');
 const webpack = require('webpack');
 const WebpackBar = require('webpackbar');
 const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
-const env = require('../env');
+const env = require('../../env');
 
 module.exports = {
   context: env.rootPath,
   entry: {
-    index: ['./src']
+    index: ['./src'],
   },
   output: {
     path: env.distPath,
     filename: '[name].[hash:8].js',
     publicPath: '/',
-    chunkFilename: '[name].[hash:8].chunk.js'
+    chunkFilename: '[name].[hash:8].chunk.js',
   },
-  externals: {},
   resolve: {
     extensions: ['.js', '.jsx', '.ts', '.tsx', '.less', '.json'],
     alias: {
-      '@': env.srcPath
-    }
+      '@': env.srcPath,
+    },
   },
   module: {
     rules: [
@@ -33,10 +33,11 @@ module.exports = {
           {
             loader: 'babel-loader',
             options: {
-              rootMode: 'upward'
-            }
-          }
-        ]
+              rootMode: 'upward',
+              cacheDirectory: true,
+            },
+          },
+        ],
       },
       {
         test: /\.(png|jpg|gif)$/,
@@ -45,10 +46,10 @@ module.exports = {
             loader: 'url-loader',
             options: {
               limit: 10000,
-              name: 'static/[name].[hash:8].[ext]'
-            }
-          }
-        ]
+              name: 'static/[name].[hash:8].[ext]',
+            },
+          },
+        ],
       },
       {
         test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
@@ -57,47 +58,47 @@ module.exports = {
             loader: 'file-loader',
             options: {
               limit: 8192,
-              name: 'fonts/[name].[hash:8].[ext]'
-            }
-          }
-        ]
-      }
-    ]
+              name: 'fonts/[name].[hash:8].[ext]',
+            },
+          },
+        ],
+      },
+    ],
   },
   optimization: {
     runtimeChunk: {
-      name: (entrypoint) => `runtime.${entrypoint.name}`
+      name: entrypoint => `runtime.${entrypoint.name}`,
     },
     splitChunks: {
       cacheGroups: {
         vendors: {
           name: 'vendors',
           chunks: 'initial',
           test: /[\\/]node_modules[\\/]/,
-          priority: 30
+          priority: 30,
         },
         asyncVendors: {
           name: 'async-vendors',
           chunks: 'async',
           test: /[\\/]node_modules[\\/]/,
-          priority: 20
+          priority: 20,
         },
         asyncCommon: {
           name: 'async-common',
           chunks: 'async',
           minChunks: 2,
           priority: 10,
-          reuseExistingChunk: true
+          reuseExistingChunk: true,
         },
         default: {
           name: 'common',
           chunks: 'all',
           minChunks: 2,
           priority: -20,
-          reuseExistingChunk: true
-        }
-      }
-    }
+          reuseExistingChunk: true,
+        },
+      },
+    },
   },
   plugins: [
     new WebpackBar(),
@@ -107,13 +108,13 @@ module.exports = {
       [
         {
           from: env.publicPath,
-          to: env.distPath
-        }
+          to: env.distPath,
+        },
       ],
-      { ignore: ['**/.*'] }
+      { ignore: ['**/.*'] },
     ),
     new HtmlWebpackPlugin({
-      template: `${env.publicPath}/index.html`
-    })
-  ]
+      template: path.resolve(env.publicPath, 'index.html'),
+    }),
+  ],
 };