@wang1212/create-web-app - npm Package Compare versions

Comparing version 0.6.2 to 0.6.3

package.json

 {
 	"name": "@wang1212/create-web-app",
-	"version": "0.6.2",
+	"version": "0.6.3",
 	"keywords": [
@@ -5,0 +5,0 @@ "web-app",

templates/app/.babelrc.js

 // See https://babeljs.io/docs/en/configuration
 
 module.exports = {
-	presets: [
-		'@babel/preset-env',
-		[
-			'@babel/preset-typescript',
-			{
-				isTSX: true,
-				allExtensions: true,
-			},
-		],
-	],
-	plugins: [],
-}
+  assumptions: {
+    privateFieldsAsProperties: true,
+    setPublicClassFields: true,
+  },
+  presets: [
+    [
+      // Latest stable ECMAScript features
+      '@babel/preset-env',
+      {
+        // Allow importing core-js in entrypoint and use browserlist to select polyfills
+        useBuiltIns: 'entry',
+        // Set the corejs version we are using to avoid warnings in console
+        corejs: require('core-js/package.json').version,
+        // Exclude transforms that make all code slower
+        exclude: ['transform-typeof-symbol'],
+      },
+    ],
+    '@babel/preset-typescript',
+  ],
+  plugins: [
+    ['@babel/plugin-proposal-decorators', { decoratorsBeforeExport: true }],
+    // Polyfills the runtime needed for async/await, generators, and friends
+    // https://babeljs.io/docs/en/babel-plugin-transform-runtime
+    [
+      '@babel/plugin-transform-runtime',
+      {
+        // By default, babel assumes babel/runtime version 7.0.0-beta.0,
+        // explicitly resolving to match the provided helper functions.
+        // https://github.com/babel/babel/issues/10261
+        version: require('@babel/runtime/package.json').version,
+      },
+    ],
+  ],
+};

templates/app/.eslintrc.js

@@ -25,2 +25,3 @@ // see docs: https://eslint.org/docs/user-guide/configuring
     'plugin:prettier/recommended',
+    'plugin:compat/recommended',
   ],
@@ -27,0 +28,0 @@ settings: {},

templates/app/config/devServer.config.js

@@ -5,3 +5,3 @@ /* dev server config */
 module.exports = {
-  host: 'local-ip',
+  // host: 'local-ip',
   port: 3000,
@@ -8,0 +8,0 @@ // https: true,

templates/app/config/webpack.config.js

@@ -6,188 +6,187 @@ /* eslint-disable */
 
-'use strict'
+'use strict';
 
-const appInfo = require('../public/manifest.json')
+const appInfo = require('../public/manifest.json');
 
 // tool
-const path = require('path')
-const webpack = require('webpack')
+const path = require('path');
+const webpack = require('webpack');
 
 // webpack plugins
-const WorkerPlugin = require('worker-plugin')
-const CopyWebpackPlugin = require('copy-webpack-plugin')
-const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin')
-const TerserPlugin = require('terser-webpack-plugin')
-const HtmlWebpackPlugin = require('html-webpack-plugin')
-const MiniCssExtractPlugin = require('mini-css-extract-plugin')
-const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
-const safePostCssParser = require('postcss-safe-parser')
-const postcssNormalize = require('postcss-normalize')
-const WorkboxPlugin = require('workbox-webpack-plugin')
-const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
+const WorkerPlugin = require('worker-plugin');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
+const TerserPlugin = require('terser-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
+const postcssNormalize = require('postcss-normalize');
+const WorkboxPlugin = require('workbox-webpack-plugin');
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
 module.exports = ({ NODE_ENV, SRC_DIR, BUILD_DIR, isEnvDevelopment = NODE_ENV === 'development', isEnvProduction = !isEnvDevelopment }) => ({
-	mode: isEnvDevelopment ? 'development' : 'production',
-	// Stop compilation early in production
-	bail: isEnvProduction,
-	target: 'web',
-	devtool: isEnvDevelopment ? 'eval-cheap-module-source-map' : false,
-	watch: isEnvDevelopment,
-	watchOptions: {
-		ignored: /node_modules/,
-	},
-	context: path.resolve(__dirname, '../'),
-	entry: {
-		app: path.join(SRC_DIR, '/index.js'),
-	},
-	output: {
-		// The build folder.
-		path: BUILD_DIR,
-		filename: isEnvDevelopment ? '[name].js' : '[name].[contenthash:8].js',
-		// There are also additional JS chunk files if you use code splitting.
-		chunkFilename: isEnvDevelopment ? '[name].chunk.js' : '[name].[chunkhash:8].chunk.js',
-		// https://webpack.js.org/configuration/output/#outputpublicpath
-		// publicPath: ''
-		// Point sourcemap entries to original disk location (format as URL on Windows)
-		devtoolModuleFilenameTemplate: isEnvProduction
-			? (info) => path.relative(SRC_DIR, info.absoluteResourcePath).replace(/\\/g, '/')
-			: isEnvDevelopment && ((info) => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
-		// this defaults to 'window', but by setting it to 'this' then
-		// module chunks which are built will work in web workers as well.
-		globalObject: 'this',
-	},
-	optimization: {
-		minimize: isEnvProduction,
-		minimizer: [
-			// This is only used in production mode
-			new TerserPlugin({
-				extractComments: false,
-				terserOptions: {
-					mangle: {
-						safari10: true,
-					},
-					output: {
-						comments: false,
-						// Turned on because emoji and regex is not minified properly using default
-						// https://github.com/facebook/create-react-app/issues/2488
-						ascii_only: true,
-					},
-				},
-			}),
-			// This is only used in production mode
-			new CssMinimizerPlugin(),
-		],
-		// Automatically split vendor and commons
-		splitChunks: {
-			chunks: 'all',
-			name: false,
-		},
-		// Keep the runtime chunk separated to enable long term caching
-		// https://github.com/facebook/create-react-app/issues/5358
-		runtimeChunk: {
-			name: (entrypoint) => `runtime-${entrypoint.name}`,
-			// multiple entry points
-			// name: 'single',
-		},
-	},
-	resolve: {
-		extensions: ['.ts', '.js', '.mjs', '.json'],
-		// Alias will cause IntelliSense to be invalid.
-		// Although it can be fixed, it will increase configuration complexity and cause a series of problems.
-		// alias: {
-		// 	components: path.resolve('./src/components/'),
-		// 	utils: path.resolve('./src/utils/'),
-		// 	assets: path.resolve('./src/assets/'),
-		// 	vendors: path.resolve('./src/vendors/'),
-		// },
-	},
-	module: {
-		rules: [
-			{
-				test: /\.([tj]s|mjs)$/i,
-				exclude: /node_modules/,
-				use: [
-					{
-						loader: 'babel-loader',
-						options: {
-							// This is a feature of `babel-loader` for webpack (not Babel itself).
-							// It enables caching results in ./node_modules/.cache/babel-loader/
-							// directory for faster rebuilds.
-							cacheDirectory: true,
-							compact: isEnvProduction,
-						},
-					},
-				],
-			},
-			{
-				test: /\.(sa|sc|c)ss$/i,
-				exclude: /node_modules/,
-				use: [
-					isEnvDevelopment ? 'style-loader' : MiniCssExtractPlugin.loader,
-					{
-						loader: 'css-loader',
-						options: {
-							sourceMap: isEnvDevelopment,
-							importLoaders: 2,
-						},
-					},
-					{
-						loader: 'postcss-loader',
-						options: {
-							sourceMap: isEnvDevelopment,
-							postcssOptions: {
-								// Necessary for external CSS imports to work
-								// https://github.com/facebook/create-react-app/issues/2677
-								ident: 'postcss',
-								plugins: [
-									require('cssnano')({
-										preset: 'default',
-									}),
-									require('postcss-flexbugs-fixes'),
-									require('postcss-preset-env')({
-										autoprefixer: {
-											flexbox: 'no-2009',
-										},
-										stage: 3,
-									}),
-									// Adds PostCSS Normalize as the reset css with default options,
-									// so that it honors browserslist config in package.json
-									// which in turn let's users customize the target behavior as per their needs.
-									postcssNormalize(),
-								],
-							},
-						},
-					},
-					'sass-loader',
-				],
-				// See https://github.com/webpack/webpack/issues/6571
-				sideEffects: true,
-			},
-			{
-				test: /\.html$/i,
-				exclude: /node_modules/,
-				use: [
-					{
-						loader: 'html-loader',
-						options: {
-							sources: {
-								list: [
-									{
-										tag: 'img',
-										attribute: 'src',
-										type: 'src',
-									},
-									{
-										tag: 'img',
-										attribute: 'data-src',
-										type: 'src',
-									},
-								],
-							},
-						},
-					},
-				],
-			},
-			{
-				test: /\.(bmp|gif|png|jpe?g|svg)$/i,
-				exclude: /node_modules/,
+  mode: isEnvDevelopment ? 'development' : 'production',
+  // Stop compilation early in production
+  bail: isEnvProduction,
+  target: 'web',
+  devtool: isEnvDevelopment ? 'eval-cheap-module-source-map' : false,
+  watch: isEnvDevelopment,
+  watchOptions: {
+    ignored: /node_modules/,
+  },
+  context: path.resolve(__dirname, '../'),
+  entry: {
+    app: path.join(SRC_DIR, '/index.ts'),
+  },
+  output: {
+    // The build folder.
+    path: BUILD_DIR,
+    filename: isEnvDevelopment ? '[name].js' : '[name].[contenthash:8].js',
+    // There are also additional JS chunk files if you use code splitting.
+    chunkFilename: isEnvDevelopment ? '[name].chunk.js' : '[name].[chunkhash:8].chunk.js',
+    // https://webpack.js.org/configuration/output/#outputpublicpath
+    // publicPath: ''
+    // Point sourcemap entries to original disk location (format as URL on Windows)
+    devtoolModuleFilenameTemplate: isEnvProduction
+      ? (info) => path.relative(SRC_DIR, info.absoluteResourcePath).replace(/\\/g, '/')
+      : isEnvDevelopment && ((info) => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
+    // this defaults to 'window', but by setting it to 'this' then
+    // module chunks which are built will work in web workers as well.
+    globalObject: 'this',
+  },
+  optimization: {
+    minimize: isEnvProduction,
+    minimizer: [
+      // This is only used in production mode
+      new TerserPlugin({
+        extractComments: false,
+        terserOptions: {
+          mangle: {
+            safari10: true,
+          },
+          output: {
+            comments: false,
+            // Turned on because emoji and regex is not minified properly using default
+            // https://github.com/facebook/create-react-app/issues/2488
+            ascii_only: true,
+          },
+        },
+      }),
+      // This is only used in production mode
+      new CssMinimizerPlugin(),
+    ],
+    // Automatically split vendor and commons
+    splitChunks: {
+      chunks: 'all',
+      name: false,
+    },
+    // Keep the runtime chunk separated to enable long term caching
+    // https://github.com/facebook/create-react-app/issues/5358
+    runtimeChunk: {
+      name: (entrypoint) => `runtime-${entrypoint.name}`,
+      // multiple entry points
+      // name: 'single',
+    },
+  },
+  resolve: {
+    extensions: ['.ts', '.js', '.mjs', '.json'],
+    // Alias will cause IntelliSense to be invalid.
+    // Although it can be fixed, it will increase configuration complexity and cause a series of problems.
+    // alias: {
+    // 	components: path.resolve('./src/components/'),
+    // 	utils: path.resolve('./src/utils/'),
+    // 	assets: path.resolve('./src/assets/'),
+    // 	vendors: path.resolve('./src/vendors/'),
+    // },
+  },
+  module: {
+    rules: [
+      {
+        test: /\.([tj]s|mjs)$/i,
+        exclude: /node_modules/,
+        use: [
+          {
+            loader: 'babel-loader',
+            options: {
+              // This is a feature of `babel-loader` for webpack (not Babel itself).
+              // It enables caching results in ./node_modules/.cache/babel-loader/
+              // directory for faster rebuilds.
+              cacheDirectory: true,
+              compact: isEnvProduction,
+            },
+          },
+        ],
+      },
+      {
+        test: /\.(sa|sc|c)ss$/i,
+        exclude: /node_modules/,
+        use: [
+          isEnvDevelopment ? 'style-loader' : MiniCssExtractPlugin.loader,
+          {
+            loader: 'css-loader',
+            options: {
+              sourceMap: isEnvDevelopment,
+              importLoaders: 2,
+            },
+          },
+          {
+            loader: 'postcss-loader',
+            options: {
+              sourceMap: isEnvDevelopment,
+              postcssOptions: {
+                // Necessary for external CSS imports to work
+                // https://github.com/facebook/create-react-app/issues/2677
+                ident: 'postcss',
+                plugins: [
+                  require('cssnano')({
+                    preset: 'default',
+                  }),
+                  require('postcss-flexbugs-fixes'),
+                  require('postcss-preset-env')({
+                    autoprefixer: {
+                      flexbox: 'no-2009',
+                    },
+                    stage: 3,
+                  }),
+                  // Adds PostCSS Normalize as the reset css with default options,
+                  // so that it honors browserslist config in package.json
+                  // which in turn let's users customize the target behavior as per their needs.
+                  postcssNormalize(),
+                ],
+              },
+            },
+          },
+          'sass-loader',
+        ],
+        // See https://github.com/webpack/webpack/issues/6571
+        sideEffects: true,
+      },
+      {
+        test: /\.html$/i,
+        exclude: /node_modules/,
+        use: [
+          {
+            loader: 'html-loader',
+            options: {
+              sources: {
+                list: [
+                  {
+                    tag: 'img',
+                    attribute: 'src',
+                    type: 'src',
+                  },
+                  {
+                    tag: 'img',
+                    attribute: 'data-src',
+                    type: 'src',
+                  },
+                ],
+              },
+            },
+          },
+        ],
+      },
+      {
+        test: /\.(bmp|gif|png|jpe?g|svg)$/i,
+        exclude: /node_modules/,
         // https://webpack.js.org/guides/asset-modules/
@@ -200,116 +199,116 @@ type: 'asset',
         // },
-				use: [
-					{
-						loader: 'image-webpack-loader',
-						options: {
-							disable: isEnvDevelopment,
-							mozjpeg: {
-								progressive: true,
-								quality: 65,
-							},
-							optipng: {
-								enabled: false,
-							},
-							pngquant: {
-								quality: [0.65, 0.9],
-								speed: 4,
-							},
-							gifsicle: {
-								interlaced: false,
-							},
-							webp: {
-								quality: 75,
-							},
-						},
-					},
-				],
-			},
-		],
-	},
-	plugins: [
-		new webpack.DllReferencePlugin({
-			context: BUILD_DIR,
-			manifest: path.join(BUILD_DIR, './vendor-manifest.json'),
-		}),
-		new WorkerPlugin(),
-		new CopyWebpackPlugin({
-			patterns: [
-				{
-					from: './public/*.!(ejs)',
-					to: '[name][ext]',
-					transform: { cache: true },
-				},
-				{
-					from: './src/assets/',
-					to: './assets/',
-					transform: { cache: true },
-				},
-				{
-					from: './src/vendors/',
-					to: './vendors/',
-					transform: { cache: true },
-				},
-			],
-		}),
-		new HtmlWebpackPlugin({
-			chunks: ['app'],
-			filename: 'index.html',
-			template: './public/index.ejs',
-			templateParameters: {
-				title: appInfo.name,
-				description: appInfo.description,
-				favicon: 'favicon.ico',
-				manifest: 'manifest.json',
-				vendor: 'vendor.js',
-			},
-		}),
-		// This is necessary to emit hot updates (currently CSS only):
-		isEnvDevelopment && new webpack.HotModuleReplacementPlugin(),
-		// File systems of different operating systems handle case differently, forcing case sensitivity
-		isEnvDevelopment && new CaseSensitivePathsPlugin(),
-		isEnvProduction &&
-			new MiniCssExtractPlugin({
-				filename: '[name].[contenthash:8].css',
-				chunkFilename: '[name].[contenthash:8].chunk.css',
-			}),
-		isEnvProduction &&
-			new WorkboxPlugin.GenerateSW({
-				clientsClaim: true,
-				exclude: [/\.map$/, /asset-manifest\.json$/],
-				maximumFileSizeToCacheInBytes: 8 * 1024 * 1024,
-				additionalManifestEntries: [
-					{ url: 'vendor-manifest.json', revision: appInfo._version },
-					{ url: 'vendor.js', revision: appInfo._version },
-				],
-				runtimeCaching: [
-					{
-						urlPattern: /^https:\/\/fonts\.googleapis\.com/,
-						handler: 'StaleWhileRevalidate',
-						options: {
-							cacheName: 'google-fonts-stylesheets',
-						},
-					},
-					{
-						urlPattern: /^https:\/\/fonts\.gstatic\.com/,
-						handler: 'CacheFirst',
-						options: {
-							cacheName: 'google-fonts-webfonts',
-							cacheableResponse: {
-								statuses: [0, 200],
-							},
-							expiration: {
-								maxAgeSeconds: 60 * 60 * 24 * 365,
-							},
-						},
-					},
-				],
-			}),
-		new BundleAnalyzerPlugin(),
-	].filter(Boolean),
-	performance: {
-		hints: 'warning',
-		assetFilter: (assetFilename) => {
-			return isEnvDevelopment ? false : !/vendor/.test(assetFilename)
-		},
-	},
-})
+        use: [
+          {
+            loader: 'image-webpack-loader',
+            options: {
+              disable: isEnvDevelopment,
+              mozjpeg: {
+                progressive: true,
+                quality: 65,
+              },
+              optipng: {
+                enabled: false,
+              },
+              pngquant: {
+                quality: [0.65, 0.9],
+                speed: 4,
+              },
+              gifsicle: {
+                interlaced: false,
+              },
+              webp: {
+                quality: 75,
+              },
+            },
+          },
+        ],
+      },
+    ],
+  },
+  plugins: [
+    new webpack.DllReferencePlugin({
+      context: BUILD_DIR,
+      manifest: path.join(BUILD_DIR, './vendor-manifest.json'),
+    }),
+    new WorkerPlugin(),
+    new CopyWebpackPlugin({
+      patterns: [
+        {
+          from: './public/*.!(ejs)',
+          to: '[name][ext]',
+          transform: { cache: true },
+        },
+        {
+          from: './src/assets/',
+          to: './assets/',
+          transform: { cache: true },
+        },
+        {
+          from: './src/vendors/',
+          to: './vendors/',
+          transform: { cache: true },
+        },
+      ],
+    }),
+    new HtmlWebpackPlugin({
+      chunks: ['app'],
+      filename: 'index.html',
+      template: './public/index.ejs',
+      templateParameters: {
+        title: appInfo.name,
+        description: appInfo.description,
+        favicon: 'favicon.ico',
+        manifest: 'manifest.json',
+        vendor: 'vendor.js',
+      },
+    }),
+    // This is necessary to emit hot updates (currently CSS only):
+    isEnvDevelopment && new webpack.HotModuleReplacementPlugin(),
+    // File systems of different operating systems handle case differently, forcing case sensitivity
+    isEnvDevelopment && new CaseSensitivePathsPlugin(),
+    isEnvProduction &&
+      new MiniCssExtractPlugin({
+        filename: '[name].[contenthash:8].css',
+        chunkFilename: '[name].[contenthash:8].chunk.css',
+      }),
+    isEnvProduction &&
+      new WorkboxPlugin.GenerateSW({
+        clientsClaim: true,
+        exclude: [/\.map$/, /asset-manifest\.json$/],
+        maximumFileSizeToCacheInBytes: 8 * 1024 * 1024,
+        additionalManifestEntries: [
+          { url: 'vendor-manifest.json', revision: appInfo._version },
+          { url: 'vendor.js', revision: appInfo._version },
+        ],
+        runtimeCaching: [
+          {
+            urlPattern: /^https:\/\/fonts\.googleapis\.com/,
+            handler: 'StaleWhileRevalidate',
+            options: {
+              cacheName: 'google-fonts-stylesheets',
+            },
+          },
+          {
+            urlPattern: /^https:\/\/fonts\.gstatic\.com/,
+            handler: 'CacheFirst',
+            options: {
+              cacheName: 'google-fonts-webfonts',
+              cacheableResponse: {
+                statuses: [0, 200],
+              },
+              expiration: {
+                maxAgeSeconds: 60 * 60 * 24 * 365,
+              },
+            },
+          },
+        ],
+      }),
+    isEnvProduction && new BundleAnalyzerPlugin(),
+  ].filter(Boolean),
+  performance: {
+    hints: 'warning',
+    assetFilter: (assetFilename) => {
+      return isEnvDevelopment ? false : !/vendor/.test(assetFilename);
+    },
+  },
+});

templates/app/config/webpack.dll.config.js

@@ -6,38 +6,41 @@ /* eslint-disable */
 
-'use strict'
+'use strict';
 
 // tool
-const path = require('path')
-const webpack = require('webpack')
+const path = require('path');
+const webpack = require('webpack');
 
 module.exports = ({ NODE_ENV, BUILD_DIR, isEnvDevelopment = NODE_ENV === 'development' }) => ({
-	mode: NODE_ENV,
-	context: path.resolve(__dirname, '../'),
-	entry: {
-		vendor: Object.keys(require('../package.json').dependencies).filter((name) => !~name.search(/\.css$/)),
-	},
-	output: {
-		path: BUILD_DIR,
-		filename: '[name].js',
-		library: '[name]_lib_[fullhash]',
-	},
-	plugins: [
-		// Moment.js is an extremely popular library that bundles large locale files
-		// by default due to how webpack interprets its code. This is a practical
-		// solution that requires the user to opt into importing specific locales.
-		// https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
-		// You can remove this if you don't use Moment.js:
-		new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
-		new webpack.DllPlugin({
-			context: BUILD_DIR,
-			name: '[name]_lib_[fullhash]',
-			path: path.join(BUILD_DIR, '[name]-manifest.json'),
-		}),
-	],
-	performance: {
-		hints: 'warning',
-		assetFilter: (assetFilename) => {
-			return isEnvDevelopment ? false : !/vendor/.test(assetFilename)
-		},
-	},
-})
+  mode: NODE_ENV,
+  context: path.resolve(__dirname, '../'),
+  entry: {
+    vendor: Object.keys(require('../package.json').dependencies).filter((name) => !~name.search(/\.css$/) && !['@babel/runtime', 'core-js'].includes(name)),
+  },
+  output: {
+    path: BUILD_DIR,
+    filename: '[name].js',
+    library: '[name]_lib_[fullhash]',
+  },
+  plugins: [
+    // Moment.js is an extremely popular library that bundles large locale files
+    // by default due to how webpack interprets its code. This is a practical
+    // solution that requires the user to opt into importing specific locales.
+    // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
+    // You can remove this if you don't use Moment.js:
+    new webpack.IgnorePlugin({
+      resourceRegExp: /^\.\/locale$/,
+      contextRegExp: /moment$/,
+    }),
+    new webpack.DllPlugin({
+      context: BUILD_DIR,
+      name: '[name]_lib_[fullhash]',
+      path: path.join(BUILD_DIR, '[name]-manifest.json'),
+    }),
+  ],
+  performance: {
+    hints: 'warning',
+    assetFilter: (assetFilename) => {
+      return isEnvDevelopment ? false : !/vendor/.test(assetFilename);
+    },
+  },
+});

templates/app/package.json

 {
-	"private": true,
-	"name": "web-app",
-	"version": "0.1.0",
-	"description": "PWA（Progressive Web App）.",
-	"author": "",
-	"license": "ISC",
-	"browserslist": [
-		"defaults"
-	],
-	"scripts": {
-		"prepare": "husky install",
-		"start": "cross-env NODE_ENV=development node scripts/start.js",
-		"build": "cross-env NODE_ENV=production node scripts/build.js",
-		"test": "jest --config=config/jest.config.js",
-		"type-check": "tsc --project tsconfig.json --noEmit",
-		"lint-js": "eslint src/ --config=.eslintrc.js --ext=js,jsx,ts,tsx --fix --quiet --cache --cache-location=node_modules/.cache/.eslintcache --format=pretty",
-		"lint-css": "stylelint src/**/*.{css,scss,sass} --fix --quiet --cache --cache-location node_modules/.cache/.stylelintcache",
-		"docs": "jsdoc -P ./package.json -R ./README.md -c ./config/jsdoc.config.js"
-	},
-	"lint-staged": {
-		"*.{js,jsx,ts,tsx}": "npm run lint-js",
-		"*.{css,scss,sass,js,jsx,ts,tsx}": "npm run lint-css"
-	},
-	"dependencies": {
-		"regenerator-runtime": "^0.13.9"
-	},
-	"devDependencies": {
-		"@babel/core": "^7.15.0",
-		"@babel/preset-env": "^7.15.0",
-		"@babel/preset-typescript": "^7.15.0",
-		"@commitlint/cli": "^13.1.0",
-		"@commitlint/config-conventional": "^13.1.0",
-		"@typescript-eslint/eslint-plugin": "^4.30.0",
-		"@typescript-eslint/parser": "^4.30.0",
-		"babel-jest": "^27.1.0",
-		"babel-loader": "^8.2.2",
-		"case-sensitive-paths-webpack-plugin": "^2.4.0",
-		"copy-webpack-plugin": "^9.0.1",
-		"cross-env": "^7.0.3",
-		"css-loader": "^6.2.0",
-		"css-minimizer-webpack-plugin": "^3.0.2",
-		"cssnano": "^5.0.8",
-		"del": "^6.0.0",
-		"docdash": "^1.2.0",
-		"eslint": "^7.32.0",
-		"eslint-config-airbnb-base": "^14.2.1",
-		"eslint-config-airbnb-typescript": "^14.0.0",
-		"eslint-config-prettier": "^8.3.0",
-		"eslint-formatter-pretty": "^4.1.0",
-		"eslint-plugin-import": "^2.24.2",
-		"eslint-plugin-prettier": "^4.0.0",
-		"eslint-plugin-sonarjs": "^0.10.0",
-		"html-loader": "^2.1.2",
-		"html-webpack-plugin": "^5.3.2",
-		"husky": "^7.0.2",
-		"image-webpack-loader": "^7.0.1",
-		"jest": "^27.1.0",
-		"jsdoc": "^3.6.7",
-		"jsdoc-babel": "^0.5.0",
-		"lint-staged": "^11.1.2",
-		"mini-css-extract-plugin": "^2.2.0",
-		"postcss-flexbugs-fixes": "^5.0.2",
-		"postcss-loader": "^6.1.1",
-		"postcss-normalize": "^10.0.0",
-		"postcss-preset-env": "^6.7.0",
-		"postcss-safe-parser": "^6.0.0",
-		"prettier": "2.3.2",
-		"sass": "^1.38.2",
-		"sass-loader": "^12.1.0",
-		"style-loader": "^3.2.1",
-		"stylelint": "^13.13.1",
-		"stylelint-color-format": "^1.1.0",
-		"stylelint-config-prettier": "^8.0.2",
-		"stylelint-config-rational-order": "^0.1.2",
-		"stylelint-config-standard": "^22.0.0",
-		"stylelint-order": "^4.1.0",
-		"stylelint-prettier": "^1.2.0",
-		"stylelint-scss": "^3.20.1",
-		"terser-webpack-plugin": "^5.1.4",
-		"typescript": "^4.4.2",
-		"webpack": "^5.51.1",
-		"webpack-bundle-analyzer": "^4.4.2",
-		"webpack-dev-server": "^4.0.0",
-		"workbox-webpack-plugin": "^6.2.4",
-		"worker-plugin": "^5.0.1"
-	}
+  "private": true,
+  "name": "web-app",
+  "version": "0.1.0",
+  "description": "PWA（Progressive Web App）.",
+  "author": "",
+  "license": "ISC",
+  "browserslist": [
+    "defaults"
+  ],
+  "scripts": {
+    "prepare": "husky install",
+    "start": "cross-env NODE_ENV=development node scripts/start.js",
+    "build": "cross-env NODE_ENV=production node scripts/build.js",
+    "test": "jest --config=config/jest.config.js",
+    "type-check": "tsc --project tsconfig.json --noEmit",
+    "lint-js": "eslint src/ --config=.eslintrc.js --ext=js,jsx,ts,tsx --fix --quiet --cache --cache-location=node_modules/.cache/.eslintcache --format=pretty",
+    "lint-css": "stylelint src/**/*.{css,scss,sass} --fix --quiet --cache --cache-location node_modules/.cache/.stylelintcache",
+    "docs": "jsdoc -P ./package.json -R ./README.md -c ./config/jsdoc.config.js"
+  },
+  "lint-staged": {
+    "*.{js,jsx,ts,tsx}": "npm run lint-js",
+    "*.{css,scss,sass,js,jsx,ts,tsx}": "npm run lint-css"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.15.4",
+    "axios": "^0.21.4",
+    "core-js": "^3.17.3"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.15.0",
+    "@babel/plugin-proposal-decorators": "^7.15.4",
+    "@babel/plugin-transform-runtime": "^7.15.0",
+    "@babel/preset-env": "^7.15.0",
+    "@babel/preset-typescript": "^7.15.0",
+    "@commitlint/cli": "^13.1.0",
+    "@commitlint/config-conventional": "^13.1.0",
+    "@typescript-eslint/eslint-plugin": "^4.30.0",
+    "@typescript-eslint/parser": "^4.30.0",
+    "babel-jest": "^27.1.0",
+    "babel-loader": "^8.2.2",
+    "case-sensitive-paths-webpack-plugin": "^2.4.0",
+    "copy-webpack-plugin": "^9.0.1",
+    "cross-env": "^7.0.3",
+    "css-loader": "^6.2.0",
+    "css-minimizer-webpack-plugin": "^3.0.2",
+    "cssnano": "^5.0.8",
+    "del": "^6.0.0",
+    "docdash": "^1.2.0",
+    "eslint": "^7.32.0",
+    "eslint-config-airbnb-base": "^14.2.1",
+    "eslint-config-airbnb-typescript": "^14.0.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-formatter-pretty": "^4.1.0",
+    "eslint-plugin-compat": "^3.13.0",
+    "eslint-plugin-import": "^2.24.2",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-sonarjs": "^0.10.0",
+    "html-loader": "^2.1.2",
+    "html-webpack-plugin": "^5.3.2",
+    "husky": "^7.0.2",
+    "image-webpack-loader": "^7.0.1",
+    "jest": "^27.1.0",
+    "jsdoc": "^3.6.7",
+    "jsdoc-babel": "^0.5.0",
+    "lint-staged": "^11.1.2",
+    "mini-css-extract-plugin": "^2.2.0",
+    "postcss-flexbugs-fixes": "^5.0.2",
+    "postcss-loader": "^6.1.1",
+    "postcss-normalize": "^10.0.0",
+    "postcss-preset-env": "^6.7.0",
+    "prettier": "2.3.2",
+    "sass": "^1.38.2",
+    "sass-loader": "^12.1.0",
+    "style-loader": "^3.2.1",
+    "stylelint": "^13.13.1",
+    "stylelint-color-format": "^1.1.0",
+    "stylelint-config-prettier": "^8.0.2",
+    "stylelint-config-rational-order": "^0.1.2",
+    "stylelint-config-standard": "^22.0.0",
+    "stylelint-order": "^4.1.0",
+    "stylelint-prettier": "^1.2.0",
+    "stylelint-scss": "^3.20.1",
+    "terser-webpack-plugin": "^5.1.4",
+    "typescript": "^4.4.2",
+    "webpack": "^5.51.1",
+    "webpack-bundle-analyzer": "^4.4.2",
+    "webpack-dev-server": "^4.0.0",
+    "workbox-webpack-plugin": "^6.2.4",
+    "worker-plugin": "^5.0.1"
+  },
+  "resolutions": {
+    "sanitize.css": "12.0.1"
+  }
 }

templates/react-app/.babelrc.js

 // see docs: https://babeljs.io/docs/en/configuration
+// see https://github.com/facebook/create-react-app/blob/main/packages/babel-preset-react-app/create.js
 
-module.exports = (api) => {
-	// This caches the Babel config by environment.
-	// https://github.com/pmmmwh/react-refresh-webpack-plugin#usage
-	api.cache.using(() => process.env.NODE_ENV)
+const isEnvDevelopment = (process.env.NODE_ENV || '').trim() !== 'production';
 
-	return {
-		presets: [
-			'@babel/preset-env',
-			'@babel/preset-react',
-			[
-				'@babel/preset-typescript',
-				{
-					isTSX: true,
-					allExtensions: true,
-				},
-			],
-		],
-		plugins: [
-			// Applies the react-refresh Babel plugin on non-production modes only
-			!api.env('production') && 'react-refresh/babel',
-		].filter(Boolean),
-	}
-}
+module.exports = {
+  assumptions: {
+    privateFieldsAsProperties: true,
+    setPublicClassFields: true,
+  },
+  presets: [
+    [
+      // Latest stable ECMAScript features
+      '@babel/preset-env',
+      {
+        // Allow importing core-js in entrypoint and use browserlist to select polyfills
+        useBuiltIns: 'entry',
+        // Set the corejs version we are using to avoid warnings in console
+        corejs: require('core-js/package.json').version,
+        // Exclude transforms that make all code slower
+        exclude: ['transform-typeof-symbol'],
+      },
+    ],
+    [
+      '@babel/preset-react',
+      {
+        // Adds component stack to warning messages
+        // Adds __self attribute to JSX which React will use for some warnings
+        development: isEnvDevelopment,
+      },
+    ],
+    '@babel/preset-typescript',
+  ],
+  plugins: [
+    ['@babel/plugin-proposal-decorators', { decoratorsBeforeExport: true }],
+    // Polyfills the runtime needed for async/await, generators, and friends
+    // https://babeljs.io/docs/en/babel-plugin-transform-runtime
+    [
+      '@babel/plugin-transform-runtime',
+      {
+        // By default, babel assumes babel/runtime version 7.0.0-beta.0,
+        // explicitly resolving to match the provided helper functions.
+        // https://github.com/babel/babel/issues/10261
+        version: require('@babel/runtime/package.json').version,
+      },
+    ],
+    // Applies the react-refresh Babel plugin on non-production modes only
+    isEnvDevelopment && 'react-refresh/babel',
+  ].filter(Boolean),
+};

templates/react-app/.eslintrc.js

@@ -27,2 +27,3 @@ // see docs: https://eslint.org/docs/user-guide/configuring
     'plugin:prettier/recommended',
+    'plugin:compat/recommended',
   ],
@@ -29,0 +30,0 @@ settings: {

templates/react-app/config/devServer.config.js

@@ -5,3 +5,3 @@ /* dev server config */
 module.exports = {
-  host: 'local-ip',
+  // host: 'local-ip',
   port: 3000,
@@ -8,0 +8,0 @@ // https: true,

templates/react-app/config/webpack.config.js

@@ -22,3 +22,2 @@ /* eslint-disable */
 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
-const safePostCssParser = require('postcss-safe-parser');
 const postcssNormalize = require('postcss-normalize');
@@ -41,3 +40,3 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
   entry: {
-    app: path.join(SRC_DIR, '/index.jsx'),
+    app: path.join(SRC_DIR, '/index.tsx'),
   },
@@ -310,3 +309,3 @@ output: {
       }),
-    new BundleAnalyzerPlugin(),
+    isEnvProduction && new BundleAnalyzerPlugin(),
   ].filter(Boolean),
@@ -313,0 +312,0 @@ performance: {

templates/react-app/config/webpack.dll.config.js

@@ -6,38 +6,41 @@ /* eslint-disable */
 
-'use strict'
+'use strict';
 
 // tool
-const path = require('path')
-const webpack = require('webpack')
+const path = require('path');
+const webpack = require('webpack');
 
 module.exports = ({ NODE_ENV, BUILD_DIR, isEnvDevelopment = NODE_ENV === 'development' }) => ({
-	mode: NODE_ENV,
-	context: path.resolve(__dirname, '../'),
-	entry: {
-		vendor: Object.keys(require('../package.json').dependencies).filter((name) => !~name.search(/\.css$/)),
-	},
-	output: {
-		path: BUILD_DIR,
-		filename: '[name].js',
-		library: '[name]_lib_[fullhash]',
-	},
-	plugins: [
-		// Moment.js is an extremely popular library that bundles large locale files
-		// by default due to how webpack interprets its code. This is a practical
-		// solution that requires the user to opt into importing specific locales.
-		// https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
-		// You can remove this if you don't use Moment.js:
-		new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
-		new webpack.DllPlugin({
-			context: BUILD_DIR,
-			name: '[name]_lib_[fullhash]',
-			path: path.join(BUILD_DIR, '[name]-manifest.json'),
-		}),
-	],
-	performance: {
-		hints: 'warning',
-		assetFilter: (assetFilename) => {
-			return isEnvDevelopment ? false : !/vendor/.test(assetFilename)
-		},
-	},
-})
+  mode: NODE_ENV,
+  context: path.resolve(__dirname, '../'),
+  entry: {
+    vendor: Object.keys(require('../package.json').dependencies).filter((name) => !~name.search(/\.css$/) && !['@babel/runtime', 'core-js'].includes(name)),
+  },
+  output: {
+    path: BUILD_DIR,
+    filename: '[name].js',
+    library: '[name]_lib_[fullhash]',
+  },
+  plugins: [
+    // Moment.js is an extremely popular library that bundles large locale files
+    // by default due to how webpack interprets its code. This is a practical
+    // solution that requires the user to opt into importing specific locales.
+    // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
+    // You can remove this if you don't use Moment.js:
+    new webpack.IgnorePlugin({
+      resourceRegExp: /^\.\/locale$/,
+      contextRegExp: /moment$/,
+    }),
+    new webpack.DllPlugin({
+      context: BUILD_DIR,
+      name: '[name]_lib_[fullhash]',
+      path: path.join(BUILD_DIR, '[name]-manifest.json'),
+    }),
+  ],
+  performance: {
+    hints: 'warning',
+    assetFilter: (assetFilename) => {
+      return isEnvDevelopment ? false : !/vendor/.test(assetFilename);
+    },
+  },
+});

templates/react-app/package.json

 {
-	"private": true,
-	"name": "web-app-with-react",
-	"version": "0.1.0",
-	"description": "Based on React.js, Redux, React-Router, PWA (Progressive Web App), progressive web application.",
-	"author": "",
-	"license": "ISC",
-	"browserslist": [
-		"defaults"
-	],
-	"scripts": {
-		"prepare": "husky install",
-		"start": "cross-env NODE_ENV=development node scripts/start.js",
-		"build": "cross-env NODE_ENV=production node scripts/build.js",
-		"test": "jest --config=config/jest.config.js",
-		"type-check": "tsc --project tsconfig.json --noEmit",
-		"lint-js": "eslint src/ --config=.eslintrc.js --ext=js,jsx,ts,tsx --fix --quiet --cache --cache-location=node_modules/.cache/.eslintcache --format=pretty",
-		"lint-css": "stylelint src/**/*.{css,scss,sass} --fix --quiet --cache --cache-location node_modules/.cache/.stylelintcache",
-		"docs": "jsdoc -P ./package.json -R ./README.md -c ./config/jsdoc.config.js"
-	},
-	"lint-staged": {
-		"*.{js,jsx,ts,tsx}": "npm run lint-js",
-		"*.{css,scss,sass,js,jsx,ts,tsx}": "npm run lint-css"
-	},
-	"dependencies": {
-		"@loadable/component": "^5.15.0",
-		"@rematch/core": "^2.1.0",
-		"axios": "^0.21.1",
-		"react": "^17.0.2",
-		"react-dom": "^17.0.2",
-		"react-jss": "^10.7.1",
-		"react-redux": "^7.2.4",
-		"react-router-dom": "^5.2.1",
-		"regenerator-runtime": "^0.13.9"
-	},
-	"devDependencies": {
-		"@babel/core": "^7.15.0",
-		"@babel/preset-env": "^7.15.0",
-		"@babel/preset-react": "^7.14.5",
-		"@babel/preset-typescript": "^7.15.0",
-		"@commitlint/cli": "^13.1.0",
-		"@commitlint/config-conventional": "^13.1.0",
-		"@pmmmwh/react-refresh-webpack-plugin": "^0.5.0-rc.5",
-		"@types/loadable__component": "^5.13.4",
-		"@types/react": "^17.0.19",
-		"@types/react-router-dom": "^5.1.8",
-		"@typescript-eslint/eslint-plugin": "^4.30.0",
-		"@typescript-eslint/parser": "^4.30.0",
-		"babel-jest": "^27.1.0",
-		"babel-loader": "^8.2.2",
-		"case-sensitive-paths-webpack-plugin": "^2.4.0",
-		"copy-webpack-plugin": "^9.0.1",
-		"cross-env": "^7.0.3",
-		"css-loader": "^6.2.0",
-		"css-minimizer-webpack-plugin": "^3.0.2",
-		"cssnano": "^5.0.8",
-		"del": "^6.0.0",
-		"docdash": "^1.2.0",
-		"eslint": "^7.32.0",
-		"eslint-config-airbnb": "^18.2.1",
-		"eslint-config-airbnb-typescript": "^14.0.0",
-		"eslint-config-prettier": "^8.3.0",
-		"eslint-formatter-pretty": "^4.1.0",
-		"eslint-plugin-import": "^2.24.2",
-		"eslint-plugin-jsx-a11y": "^6.4.1",
-		"eslint-plugin-prettier": "^4.0.0",
-		"eslint-plugin-react": "^7.25.1",
-		"eslint-plugin-react-hooks": "^4.2.0",
-		"eslint-plugin-sonarjs": "^0.10.0",
-		"html-loader": "^2.1.2",
-		"html-webpack-plugin": "^5.3.2",
-		"husky": "^7.0.2",
-		"image-webpack-loader": "^7.0.1",
-		"jest": "^27.1.0",
-		"jsdoc": "^3.6.7",
-		"jsdoc-babel": "^0.5.0",
-		"lint-staged": "^11.1.2",
-		"mini-css-extract-plugin": "^2.2.0",
-		"postcss-flexbugs-fixes": "^5.0.2",
-		"postcss-loader": "^6.1.1",
-		"postcss-normalize": "^10.0.0",
-		"postcss-preset-env": "^6.7.0",
-		"postcss-safe-parser": "^6.0.0",
-		"prettier": "2.3.2",
-		"react-refresh": "^0.10.0",
-		"redux-logger": "^3.0.6",
-		"sass": "^1.38.2",
-		"sass-loader": "^12.1.0",
-		"style-loader": "^3.2.1",
-		"stylelint": "^13.13.1",
-		"stylelint-color-format": "^1.1.0",
-		"stylelint-config-prettier": "^8.0.2",
-		"stylelint-config-rational-order": "^0.1.2",
-		"stylelint-config-standard": "^22.0.0",
-		"stylelint-order": "^4.1.0",
-		"stylelint-prettier": "^1.2.0",
-		"stylelint-scss": "^3.20.1",
-		"terser-webpack-plugin": "^5.1.4",
-		"typescript": "^4.4.2",
-		"webpack": "^5.51.1",
-		"webpack-bundle-analyzer": "^4.4.2",
-		"webpack-dev-server": "^4.0.0",
-		"workbox-webpack-plugin": "^6.2.4",
-		"worker-plugin": "^5.0.1"
-	}
+  "private": true,
+  "name": "web-app-with-react",
+  "version": "0.1.0",
+  "description": "Based on React.js, Redux, React-Router, PWA (Progressive Web App), progressive web application.",
+  "author": "",
+  "license": "ISC",
+  "browserslist": [
+    "defaults"
+  ],
+  "scripts": {
+    "prepare": "husky install",
+    "start": "cross-env NODE_ENV=development node scripts/start.js",
+    "build": "cross-env NODE_ENV=production node scripts/build.js",
+    "test": "jest --config=config/jest.config.js",
+    "type-check": "tsc --project tsconfig.json --noEmit",
+    "lint-js": "eslint src/ --config=.eslintrc.js --ext=js,jsx,ts,tsx --fix --quiet --cache --cache-location=node_modules/.cache/.eslintcache --format=pretty",
+    "lint-css": "stylelint src/**/*.{css,scss,sass} --fix --quiet --cache --cache-location node_modules/.cache/.stylelintcache",
+    "docs": "jsdoc -P ./package.json -R ./README.md -c ./config/jsdoc.config.js"
+  },
+  "lint-staged": {
+    "*.{js,jsx,ts,tsx}": "npm run lint-js",
+    "*.{css,scss,sass,js,jsx,ts,tsx}": "npm run lint-css"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.15.4",
+    "@loadable/component": "^5.15.0",
+    "@rematch/core": "^2.1.0",
+    "axios": "^0.21.1",
+    "core-js": "^3.17.3",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-jss": "^10.7.1",
+    "react-redux": "^7.2.4",
+    "react-router-dom": "^5.2.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.15.0",
+    "@babel/plugin-proposal-decorators": "^7.15.4",
+    "@babel/plugin-transform-runtime": "^7.15.0",
+    "@babel/preset-env": "^7.15.0",
+    "@babel/preset-react": "^7.14.5",
+    "@babel/preset-typescript": "^7.15.0",
+    "@commitlint/cli": "^13.1.0",
+    "@commitlint/config-conventional": "^13.1.0",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.0-rc.5",
+    "@types/loadable__component": "^5.13.4",
+    "@types/react": "^17.0.19",
+    "@types/react-router-dom": "^5.1.8",
+    "@typescript-eslint/eslint-plugin": "^4.30.0",
+    "@typescript-eslint/parser": "^4.30.0",
+    "babel-jest": "^27.1.0",
+    "babel-loader": "^8.2.2",
+    "case-sensitive-paths-webpack-plugin": "^2.4.0",
+    "copy-webpack-plugin": "^9.0.1",
+    "cross-env": "^7.0.3",
+    "css-loader": "^6.2.0",
+    "css-minimizer-webpack-plugin": "^3.0.2",
+    "cssnano": "^5.0.8",
+    "del": "^6.0.0",
+    "docdash": "^1.2.0",
+    "eslint": "^7.32.0",
+    "eslint-config-airbnb": "^18.2.1",
+    "eslint-config-airbnb-typescript": "^14.0.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-formatter-pretty": "^4.1.0",
+    "eslint-plugin-compat": "^3.13.0",
+    "eslint-plugin-import": "^2.24.2",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.25.1",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint-plugin-sonarjs": "^0.10.0",
+    "html-loader": "^2.1.2",
+    "html-webpack-plugin": "^5.3.2",
+    "husky": "^7.0.2",
+    "image-webpack-loader": "^7.0.1",
+    "jest": "^27.1.0",
+    "jsdoc": "^3.6.7",
+    "jsdoc-babel": "^0.5.0",
+    "lint-staged": "^11.1.2",
+    "mini-css-extract-plugin": "^2.2.0",
+    "postcss-flexbugs-fixes": "^5.0.2",
+    "postcss-loader": "^6.1.1",
+    "postcss-normalize": "^10.0.0",
+    "postcss-preset-env": "^6.7.0",
+    "prettier": "2.3.2",
+    "react-refresh": "^0.10.0",
+    "redux-logger": "^3.0.6",
+    "sass": "^1.38.2",
+    "sass-loader": "^12.1.0",
+    "style-loader": "^3.2.1",
+    "stylelint": "^13.13.1",
+    "stylelint-color-format": "^1.1.0",
+    "stylelint-config-prettier": "^8.0.2",
+    "stylelint-config-rational-order": "^0.1.2",
+    "stylelint-config-standard": "^22.0.0",
+    "stylelint-order": "^4.1.0",
+    "stylelint-prettier": "^1.2.0",
+    "stylelint-scss": "^3.20.1",
+    "terser-webpack-plugin": "^5.1.4",
+    "typescript": "^4.4.2",
+    "webpack": "^5.51.1",
+    "webpack-bundle-analyzer": "^4.4.2",
+    "webpack-dev-server": "^4.0.0",
+    "workbox-webpack-plugin": "^6.2.4",
+    "worker-plugin": "^5.0.1"
+  },
+  "resolutions": {
+    "sanitize.css": "12.0.1"
+  }
 }

templates/react-app/src/models/index.ts

@@ -16,3 +16,3 @@ /**
   redux: {
-    middlewares: [logger],
+    middlewares: [process.env.NODE_ENV !== 'production' && logger].filter(Boolean),
   },
@@ -19,0 +19,0 @@ models: {

Fixed alerts

Network access

Supply chain risk

This module accesses the network.

Found 1 instance in 1 package

Improved metrics

Lines of code

2887

increased by2.59%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

223290

decreased by-16.3%

Number of package files

115

decreased by-24.34%

Number of low supply chain risk alerts

7

increased by16.67%

No dependency changes