From 748882e4f2427895dd92bf54f2f8fc0b815a11d0 Mon Sep 17 00:00:00 2001 From: wang1212 Date: Thu, 9 Sep 2021 23:33:45 +0800 Subject: [PATCH] build(templates): remove `postcss-safe-parser` :wastebasket: --- templates/app/config/webpack.config.js | 587 +++++++++---------- templates/app/package.json | 171 +++--- templates/react-app/config/webpack.config.js | 1 - templates/react-app/package.json | 207 ++++--- 4 files changed, 481 insertions(+), 485 deletions(-) diff --git a/templates/app/config/webpack.config.js b/templates/app/config/webpack.config.js index 66b0dd8..b9a8595 100644 --- a/templates/app/config/webpack.config.js +++ b/templates/app/config/webpack.config.js @@ -3,192 +3,191 @@ /*! webpack config */ -'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.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/, // https://webpack.js.org/guides/asset-modules/ type: 'asset', // parser: { @@ -196,118 +195,118 @@ module.exports = ({ NODE_ENV, SRC_DIR, BUILD_DIR, isEnvDevelopment = NODE_ENV == // maxSize: 8 * 1024, // 8kb // }, // }, - 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, + }, + }, + }, + ], + }), + new BundleAnalyzerPlugin(), + ].filter(Boolean), + performance: { + hints: 'warning', + assetFilter: (assetFilename) => { + return isEnvDevelopment ? false : !/vendor/.test(assetFilename); + }, + }, +}); diff --git a/templates/app/package.json b/templates/app/package.json index 2d1677c..2c91252 100644 --- a/templates/app/package.json +++ b/templates/app/package.json @@ -1,88 +1,87 @@ { - "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": { + "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", + "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" + } } diff --git a/templates/react-app/config/webpack.config.js b/templates/react-app/config/webpack.config.js index 748d5c6..0fec5b6 100644 --- a/templates/react-app/config/webpack.config.js +++ b/templates/react-app/config/webpack.config.js @@ -19,7 +19,6 @@ const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin'); const TerserPlugin = require('terser-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 HtmlWebpackPlugin = require('html-webpack-plugin'); const WorkboxPlugin = require('workbox-webpack-plugin'); diff --git a/templates/react-app/package.json b/templates/react-app/package.json index 0c73567..5240375 100644 --- a/templates/react-app/package.json +++ b/templates/react-app/package.json @@ -1,106 +1,105 @@ { - "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": { + "@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", + "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" + } }