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

Comparing version 0.3.15 to 0.3.16

package.json

 {
 	"name": "@wang1212/create-web-app",
-	"version": "0.3.15",
+	"version": "0.3.16",
 	"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,
-			},
+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)
+
+	return {
+		presets: [
+			'@babel/preset-env',
+			[
+				'@babel/preset-typescript',
+				{
+					isTSX: true,
+					allExtensions: true,
+				},
+			],
 		],
-	],
-	plugins: ['@babel/plugin-syntax-dynamic-import', '@babel/plugin-proposal-class-properties', '@babel/plugin-proposal-object-rest-spread'],
+		plugins: [
+			'@babel/plugin-syntax-dynamic-import',
+			'@babel/plugin-proposal-class-properties',
+			'@babel/plugin-proposal-object-rest-spread',
+			// Applies the react-refresh Babel plugin on non-production modes only
+			!api.env('production') && 'react-refresh/babel',
+		].filter(Boolean),
+	}
 }

templates/app/config/path.config.js

@@ -11,9 +11,3 @@ /* eslint-disable */
 	/* app build directory */
-	build: is_dev ? 'D:\\nginx\\webapps\\App\\' : require('path').resolve(__dirname, '../build/'),
-	/* server proxy */
-	proxy: {
-		open: true,
-		port: 3000,
-		proxy: 'http://localhost:8181/App/',
-	},
+	build: require('path').resolve(__dirname, '../build/'),
 })

templates/app/config/webpack.config.js

 /* eslint-disable */
+// https://webpack.js.org/configuration/
 
@@ -21,5 +22,6 @@ /*! webpack config */
 const HtmlWebpackPlugin = require('html-webpack-plugin')
-const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
 const WorkboxPlugin = require('workbox-webpack-plugin')
 const postcssNormalize = require('postcss-normalize')
+const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin')
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
 
@@ -32,3 +34,3 @@ module.exports = ({ NODE_ENV, SRC_DIR, BUILD_DIR, isEnvDevelopment = NODE_ENV === 'development', isEnvProduction = !isEnvDevelopment }) => ({
 	devtool: isEnvDevelopment ? 'cheap-module-eval-source-map' : 'none',
-	watch: true,
+	watch: !!isEnvDevelopment,
 	watchOptions: {
@@ -273,2 +275,3 @@ ignored: /node_modules/,
 		}),
+		isEnvDevelopment && new ReactRefreshWebpackPlugin(),
 		// This is necessary to emit hot updates (currently CSS only):
@@ -283,3 +286,2 @@ isEnvDevelopment && new webpack.HotModuleReplacementPlugin(),
 			}),
-		new BundleAnalyzerPlugin(),
 		isEnvProduction &&
@@ -317,3 +319,16 @@ new WorkboxPlugin.GenerateSW({
 			}),
+		new BundleAnalyzerPlugin(),
 	].filter(Boolean),
+	// Some libraries import Node modules but don't use them in the browser.
+	// Tell webpack to provide empty mocks for them so importing them works.
+	node: {
+		module: 'empty',
+		dgram: 'empty',
+		dns: 'mock',
+		fs: 'empty',
+		http2: 'empty',
+		net: 'empty',
+		tls: 'empty',
+		child_process: 'empty',
+	},
 	performance: {
@@ -320,0 +335,0 @@ hints: 'warning',

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

 /* eslint-disable */
+// https://webpack.js.org/configuration/
 
@@ -15,3 +16,3 @@ /*! External dependencies packaged individually */
 	entry: {
-		vendor: Object.keys(require('../package.json').dependencies)
+		vendor: Object.keys(require('../package.json').dependencies),
 	},
@@ -21,16 +22,22 @@ output: {
 		filename: '[name].js',
-		library: '[name]_lib_[hash]'
+		library: '[name]_lib_[hash]',
 	},
 	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({
 			name: '[name]_lib_[hash]',
-			path: path.join(BUILD_DIR, '[name]-manifest.json')
-		})
+			path: path.join(BUILD_DIR, '[name]-manifest.json'),
+		}),
 	],
 	performance: {
 		hints: 'warning',
-		assetFilter: assetFilename => {
+		assetFilter: (assetFilename) => {
 			return is_dev ? false : !/vendor/.test(assetFilename)
-		}
-	}
+		},
+	},
 })

templates/app/package.json

 {
+	"private": true,
 	"name": "web-app",
@@ -11,8 +12,7 @@ "version": "0.1.0",
 	"scripts": {
-		"start": "set NODE_ENV=development && node scripts/index.js",
-		"build": "node scripts/index.js",
+		"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": "eslint --config .eslintrc.js --ext js,jsx,.ts,.tsx --ignore-pattern src/vendors/**/* --cache --cache-location node_modules/.cache/.eslintcache --quiet --fix src/",
-		"webpack": "npx webpack --config ./config/webpack.config.js",
 		"docs": "jsdoc -P ./package.json -R ./README.md -c ./config/jsdoc.config.js"
@@ -32,19 +32,20 @@ },
 	"devDependencies": {
-		"@babel/core": "^7.10.3",
-		"@babel/plugin-proposal-class-properties": "^7.10.1",
-		"@babel/plugin-proposal-object-rest-spread": "^7.10.3",
+		"@babel/core": "^7.10.4",
+		"@babel/plugin-proposal-class-properties": "^7.10.4",
+		"@babel/plugin-proposal-object-rest-spread": "^7.10.4",
 		"@babel/plugin-syntax-dynamic-import": "^7.8.3",
-		"@babel/preset-env": "^7.10.3",
-		"@babel/preset-typescript": "^7.10.1",
-		"@typescript-eslint/eslint-plugin": "^3.4.0",
-		"@typescript-eslint/parser": "^3.4.0",
+		"@babel/preset-env": "^7.10.4",
+		"@babel/preset-typescript": "^7.10.4",
+		"@pmmmwh/react-refresh-webpack-plugin": "^0.3.3",
+		"@typescript-eslint/eslint-plugin": "^3.6.0",
+		"@typescript-eslint/parser": "^3.6.0",
 		"babel-jest": "^26.1.0",
 		"babel-loader": "^8.1.0",
-		"browser-sync": "^2.26.7",
 		"case-sensitive-paths-webpack-plugin": "^2.3.0",
-		"copy-webpack-plugin": "^6.0.2",
+		"copy-webpack-plugin": "^6.0.3",
+		"cross-env": "^7.0.2",
 		"css-loader": "^3.6.0",
 		"del": "^5.1.0",
 		"docdash": "^1.2.0",
-		"eslint": "^7.3.1",
+		"eslint": "^7.4.0",
 		"eslint-config-prettier": "^6.11.0",
@@ -62,3 +63,2 @@ "eslint-plugin-prettier": "^3.1.4",
 		"mini-css-extract-plugin": "^0.9.0",
-		"node-sass": "^4.14.1",
 		"optimize-css-assets-webpack-plugin": "^5.0.3",
@@ -71,9 +71,12 @@ "postcss-flexbugs-fixes": "^4.2.1",
 		"prettier": "2.0.5",
-		"sass-loader": "^8.0.2",
+		"react-refresh": "^0.8.3",
+		"sass": "^1.26.10",
+		"sass-loader": "^9.0.2",
 		"style-loader": "^1.2.1",
 		"terser-webpack-plugin": "^3.0.6",
-		"typescript": "^3.9.5",
+		"typescript": "^3.9.6",
 		"url-loader": "^4.1.0",
 		"webpack": "^4.43.0",
 		"webpack-bundle-analyzer": "^3.8.0",
+		"webpack-dev-server": "^3.11.0",
 		"workbox-webpack-plugin": "^5.1.3",
@@ -80,0 +83,0 @@ "worker-loader": "^2.0.0"

templates/app/README.md

@@ -16,2 +16,3 @@ # Web App
     |   ├── webpack.dll.config.js
+    |   ├── devServer.config.js
     |   ├── jest.config.js
@@ -62,8 +63,4 @@ |   └── jsdoc.config.js
 
-    If you use a reverse proxy, you need to install nginx locally, the configuration file is in **config/nginx.conf**, start nginx:
+    The server has been configured by default. If you use a proxy, you can add it in the configuration file **devServer.config.js**. See the documentation for details.
 
-        start nginx
-
-    If you do not use a reverse proxy, you can change the configuration of the [BrowserSync](https://www.browsersync.io/) plugin in **scripts/index.js**.
-
 3.  Start the project (development environment)
@@ -70,0 +67,0 @@

templates/app/README.zh-CN.md

@@ -16,2 +16,3 @@ # Web App
     |   ├── webpack.dll.config.js # webpack 外部依赖配置
+    |   ├── devServer.config.js   # 开发服务器配置
     |   ├── jest.config.js        # jest  代码测试配置
@@ -62,8 +63,4 @@ |   └── jsdoc.config.js       # jsdoc 文档配置
 
-    若使用反向代理，需在本地安装好 nginx，配置文件在 **config/nginx.conf** 中，启动 nginx ：
+    服务器已默认配置好，若使用代理，在配置文件 **devServer.config.js** 中添加即可，具体查看文档。
 
-        start nginx
-
-    若不使用反向代理，更改 **scripts/index.js** 中 [BrowserSync](https://www.browsersync.io/) 插件的配置即可。
-
 3.  启动项目（开发环境）
@@ -70,0 +67,0 @@

templates/react-app/.babelrc.js

 // See https://babeljs.io/docs/en/configuration
 
-module.exports = {
-	presets: [
-		'@babel/preset-env',
-		'@babel/preset-react',
-		[
-			'@babel/preset-typescript',
-			{
-				isTSX: true,
-				allExtensions: true,
-			},
+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)
+
+	return {
+		presets: [
+			'@babel/preset-env',
+			'@babel/preset-react',
+			[
+				'@babel/preset-typescript',
+				{
+					isTSX: true,
+					allExtensions: true,
+				},
+			],
 		],
-	],
-	plugins: ['@babel/plugin-syntax-dynamic-import', '@babel/plugin-proposal-class-properties', '@babel/plugin-proposal-object-rest-spread'],
+		plugins: [
+			'@babel/plugin-syntax-dynamic-import',
+			'@babel/plugin-proposal-class-properties',
+			'@babel/plugin-proposal-object-rest-spread',
+			// Applies the react-refresh Babel plugin on non-production modes only
+			!api.env('production') && 'react-refresh/babel',
+		].filter(Boolean),
+	}
 }

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

@@ -11,9 +11,3 @@ /* eslint-disable */
 	/* app build directory */
-	build: is_dev ? 'D:\\nginx\\webapps\\App\\' : require('path').resolve(__dirname, '../build/'),
-	/* server proxy */
-	proxy: {
-		open: true,
-		port: 3000,
-		proxy: 'http://localhost:8181/App/',
-	},
+	build: require('path').resolve(__dirname, '../build/'),
 })

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

 /* eslint-disable */
+// https://webpack.js.org/configuration/
 
@@ -21,5 +22,6 @@ /*! webpack config */
 const HtmlWebpackPlugin = require('html-webpack-plugin')
-const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
 const WorkboxPlugin = require('workbox-webpack-plugin')
 const postcssNormalize = require('postcss-normalize')
+const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin')
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
 
@@ -32,3 +34,3 @@ module.exports = ({ NODE_ENV, SRC_DIR, BUILD_DIR, isEnvDevelopment = NODE_ENV === 'development', isEnvProduction = !isEnvDevelopment }) => ({
 	devtool: isEnvDevelopment ? 'cheap-module-eval-source-map' : 'none',
-	watch: true,
+	watch: !!isEnvDevelopment,
 	watchOptions: {
@@ -274,2 +276,3 @@ ignored: /node_modules/,
 		}),
+		isEnvDevelopment && new ReactRefreshWebpackPlugin(),
 		// This is necessary to emit hot updates (currently CSS only):
@@ -284,3 +287,2 @@ isEnvDevelopment && new webpack.HotModuleReplacementPlugin(),
 			}),
-		new BundleAnalyzerPlugin(),
 		isEnvProduction &&
@@ -318,3 +320,16 @@ new WorkboxPlugin.GenerateSW({
 			}),
+		new BundleAnalyzerPlugin(),
 	].filter(Boolean),
+	// Some libraries import Node modules but don't use them in the browser.
+	// Tell webpack to provide empty mocks for them so importing them works.
+	node: {
+		module: 'empty',
+		dgram: 'empty',
+		dns: 'mock',
+		fs: 'empty',
+		http2: 'empty',
+		net: 'empty',
+		tls: 'empty',
+		child_process: 'empty',
+	},
 	performance: {
@@ -321,0 +336,0 @@ hints: 'warning',

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

 /* eslint-disable */
+// https://webpack.js.org/configuration/
 
@@ -15,3 +16,3 @@ /*! External dependencies packaged individually */
 	entry: {
-		vendor: Object.keys(require('../package.json').dependencies)
+		vendor: Object.keys(require('../package.json').dependencies),
 	},
@@ -21,16 +22,34 @@ output: {
 		filename: '[name].js',
-		library: '[name]_lib_[hash]'
+		library: '[name]_lib_[hash]',
 	},
 	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({
 			name: '[name]_lib_[hash]',
-			path: path.join(BUILD_DIR, '[name]-manifest.json')
-		})
+			path: path.join(BUILD_DIR, '[name]-manifest.json'),
+		}),
 	],
+	// Some libraries import Node modules but don't use them in the browser.
+	// Tell webpack to provide empty mocks for them so importing them works.
+	node: {
+		module: 'empty',
+		dgram: 'empty',
+		dns: 'mock',
+		fs: 'empty',
+		http2: 'empty',
+		net: 'empty',
+		tls: 'empty',
+		child_process: 'empty',
+	},
 	performance: {
 		hints: 'warning',
-		assetFilter: assetFilename => {
+		assetFilter: (assetFilename) => {
 			return is_dev ? false : !/vendor/.test(assetFilename)
-		}
-	}
+		},
+	},
 })

templates/react-app/package.json

 {
+	"private": true,
 	"name": "web-app-with-react",
@@ -11,8 +12,7 @@ "version": "0.1.0",
 	"scripts": {
-		"start": "set NODE_ENV=development && node scripts/index.js",
-		"build": "node scripts/index.js",
+		"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": "eslint --config .eslintrc.js --ext js,jsx,.ts,.tsx --ignore-pattern src/vendors/**/* --cache --cache-location node_modules/.cache/.eslintcache --quiet --fix src/",
-		"webpack": "npx webpack --config ./config/webpack.config.js",
 		"docs": "jsdoc -P ./package.json -R ./README.md -c ./config/jsdoc.config.js"
@@ -29,3 +29,3 @@ },
 	"dependencies": {
-		"@loadable/component": "^5.12.0",
+		"@loadable/component": "^5.13.1",
 		"@rematch/core": "^1.4.0",
@@ -41,28 +41,29 @@ "axios": "^0.19.2",
 	"devDependencies": {
-		"@babel/core": "^7.10.3",
-		"@babel/plugin-proposal-class-properties": "^7.10.1",
-		"@babel/plugin-proposal-object-rest-spread": "^7.10.3",
+		"@babel/core": "^7.10.4",
+		"@babel/plugin-proposal-class-properties": "^7.10.4",
+		"@babel/plugin-proposal-object-rest-spread": "^7.10.4",
 		"@babel/plugin-syntax-dynamic-import": "^7.8.3",
-		"@babel/preset-env": "^7.10.3",
-		"@babel/preset-react": "^7.10.1",
-		"@babel/preset-typescript": "^7.10.1",
-		"@types/loadable__component": "^5.10.0",
-		"@types/react": "^16.9.41",
+		"@babel/preset-env": "^7.10.4",
+		"@babel/preset-react": "^7.10.4",
+		"@babel/preset-typescript": "^7.10.4",
+		"@pmmmwh/react-refresh-webpack-plugin": "^0.3.3",
+		"@types/loadable__component": "^5.13.0",
+		"@types/react": "^16.9.43",
 		"@types/react-redux": "^7.1.9",
 		"@types/react-router-dom": "^5.1.5",
-		"@typescript-eslint/eslint-plugin": "^3.4.0",
-		"@typescript-eslint/parser": "^3.4.0",
+		"@typescript-eslint/eslint-plugin": "^3.6.0",
+		"@typescript-eslint/parser": "^3.6.0",
 		"babel-jest": "^26.1.0",
 		"babel-loader": "^8.1.0",
-		"browser-sync": "^2.26.7",
 		"case-sensitive-paths-webpack-plugin": "^2.3.0",
-		"copy-webpack-plugin": "^6.0.2",
+		"copy-webpack-plugin": "^6.0.3",
+		"cross-env": "^7.0.2",
 		"css-loader": "^3.6.0",
 		"del": "^5.1.0",
 		"docdash": "^1.2.0",
-		"eslint": "^7.3.1",
+		"eslint": "^7.4.0",
 		"eslint-config-prettier": "^6.11.0",
 		"eslint-plugin-prettier": "^3.1.4",
-		"eslint-plugin-react": "^7.20.0",
-		"eslint-plugin-react-hooks": "^4.0.4",
+		"eslint-plugin-react": "^7.20.3",
+		"eslint-plugin-react-hooks": "^4.0.7",
 		"file-loader": "^6.0.0",
@@ -78,3 +79,2 @@ "html-loader": "^1.1.0",
 		"mini-css-extract-plugin": "^0.9.0",
-		"node-sass": "^4.14.1",
 		"optimize-css-assets-webpack-plugin": "^5.0.3",
@@ -87,10 +87,13 @@ "postcss-flexbugs-fixes": "^4.2.1",
 		"prettier": "2.0.5",
+		"react-refresh": "^0.8.3",
 		"redux-logger": "^3.0.6",
-		"sass-loader": "^8.0.2",
+		"sass": "^1.26.10",
+		"sass-loader": "^9.0.2",
 		"style-loader": "^1.2.1",
 		"terser-webpack-plugin": "^3.0.6",
-		"typescript": "^3.9.5",
+		"typescript": "^3.9.6",
 		"url-loader": "^4.1.0",
 		"webpack": "^4.43.0",
 		"webpack-bundle-analyzer": "^3.8.0",
+		"webpack-dev-server": "^3.11.0",
 		"workbox-webpack-plugin": "^5.1.3",
@@ -97,0 +100,0 @@ "worker-loader": "^2.0.0"

templates/react-app/README.md

@@ -16,2 +16,3 @@ # Web App with React.js
     |   ├── webpack.dll.config.js
+    |   ├── devServer.config.js
     |   ├── jest.config.js
@@ -66,8 +67,4 @@ |   └── jsdoc.config.js
 
-    If you use a reverse proxy, you need to install nginx locally, the configuration file is in **config/nginx.conf**, start nginx:
+    The server has been configured by default. If you use a proxy, you can add it in the configuration file **devServer.config.js**. See the documentation for details.
 
-        start nginx
-
-    If you do not use a reverse proxy, you can change the configuration of the [BrowserSync](https://www.browsersync.io/) plugin in **scripts/index.js**.
-
 3.  Start the project (development environment)
@@ -74,0 +71,0 @@

templates/react-app/README.zh-CN.md

@@ -16,2 +16,3 @@ # Web App with React.js
     |   ├── webpack.dll.config.js # webpack 外部依赖配置
+    |   ├── devServer.config.js   # 开发服务器配置
     |   ├── jest.config.js        # jest  代码测试配置
@@ -66,8 +67,4 @@ |   └── jsdoc.config.js       # jsdoc 文档配置
 
-    若使用反向代理，需在本地安装好 nginx，配置文件在 **config/nginx.conf** 中，启动 nginx ：
+    服务器已默认配置好，若使用代理，在配置文件 **devServer.config.js** 中添加即可，具体查看文档。
 
-        start nginx
-
-    若不使用反向代理，更改 **scripts/index.js** 中 [BrowserSync](https://www.browsersync.io/) 插件的配置即可。
-
 3.  启动项目（开发环境）
@@ -74,0 +71,0 @@

templates/react-app/src/utils/api.ts

@@ -11,2 +11,8 @@ /**
 
+type ResponseData = {
+	code: typeof ResponseCode[keyof typeof ResponseCode]
+	message?: string
+	data?: unknown | Record<string, unknown>
+}
+
 /**
@@ -23,3 +29,3 @@ * * Base name
 	success: 200,
-}
+} as const
 
@@ -92,3 +98,3 @@ /**
 	try {
-		const { data } = await http.post(apiPath_SignIn, params, config)
+		const { data } = await http.post<ResponseData>(apiPath_SignIn, params, config)
 
@@ -122,3 +128,3 @@ if (ResponseCode.success !== data.code) throw new Error(data.message)
 	try {
-		const { data } = await http.delete(apiPath_SignOut, config)
+		const { data } = await http.delete<ResponseData>(apiPath_SignOut, config)
 
@@ -147,5 +153,6 @@ // 判断响应码
  * @async
+ * @param {AxiosRequestConfig} [config]
  * @returns {Promise<Result<unknown>>}
  */
-export async function getSignedUser(): Promise<Result<unknown>> {
+export async function getSignedUser(config?: AxiosRequestConfig): Promise<Result<unknown>> {
 	try {
@@ -160,3 +167,3 @@ const tk = sessionStorage.getItem('tk')
 		// TODO
-		const { data } = await http.get(apiPath_SignedUser, config)
+		const { data } = await http.get<ResponseData>(apiPath_SignedUser, config)
 
@@ -163,0 +170,0 @@ if (ResponseCode.success !== data.code) throw new Error(data.message)

No alert changes

Improved metrics

Total package byte prevSize

211653

increased by3.92%

Number of package files

104

increased by4%

Lines of code

2818

increased by10.77%

Worsened metrics

Number of low supply chain risk alerts

6

increased by50%

No dependency changes