From 098c6b0fc8f14a74dfaaabd466f1dc9939dd36b3 Mon Sep 17 00:00:00 2001 From: notend Date: Fri, 5 Jan 2024 00:40:36 +0800 Subject: [PATCH] feat: enable msw for GitHub page and fix public folder miss files when bundle --- .github/workflows/build.yml | 1 + env/{development.env => .env.development} | 1 + env/{production.env => .env.production} | 1 + package.json | 1 + pnpm-lock.yaml | 36 ++++++++++++++++++++++- src/index.tsx | 5 +--- src/react-app-env.d.ts | 1 + webpack/config.ts | 4 +-- webpack/webpack.production.ts | 14 +++++++++ 9 files changed, 57 insertions(+), 7 deletions(-) rename env/{development.env => .env.development} (61%) rename env/{production.env => .env.production} (81%) diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml index d470e25..1c6f7c8 100644 --- a/.github/workflows/build.yml +++ b/.github/workflows/build.yml @@ -12,6 +12,7 @@ jobs: env: PUBLIC_PATH: /webpack5-react-template/ + MSW_ENABLE: true steps: - name: Checkout diff --git a/env/development.env b/env/.env.development similarity index 61% rename from env/development.env rename to env/.env.development index 8431533..13cf79d 100644 --- a/env/development.env +++ b/env/.env.development @@ -1,2 +1,3 @@ APP_URL=url PUBLIC_PATH=/ +MSW_ENABLE=true diff --git a/env/production.env b/env/.env.production similarity index 81% rename from env/production.env rename to env/.env.production index 1bf9bfb..ffebd5f 100644 --- a/env/production.env +++ b/env/.env.production @@ -1,2 +1,3 @@ ## this should not commit actually # PUBLIC_PATH=/webpack5-react-template/ +#MSW_ENABLE=true diff --git a/package.json b/package.json index ee5b550..6637030 100644 --- a/package.json +++ b/package.json @@ -73,6 +73,7 @@ "babel-jest": "^29.7.0", "babel-loader": "^9.1.3", "commitizen": "^4.3.0", + "copy-webpack-plugin": "^11.0.0", "core-js": "^3.29.0", "cross-env": "^7.0.3", "css-loader": "^6.7.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5424751..bca7906 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -103,6 +103,9 @@ devDependencies: commitizen: specifier: ^4.3.0 version: 4.3.0(typescript@4.9.5) + copy-webpack-plugin: + specifier: ^11.0.0 + version: 11.0.0(webpack@5.89.0) core-js: specifier: ^3.29.0 version: 3.29.0 @@ -2240,7 +2243,7 @@ packages: debug: 4.3.4 espree: 9.6.1 globals: 13.20.0 - ignore: 5.2.4 + ignore: 5.3.0 import-fresh: 3.3.0 js-yaml: 4.1.0 minimatch: 3.1.2 @@ -4716,6 +4719,21 @@ packages: engines: {node: '>= 0.6'} dev: true + /copy-webpack-plugin@11.0.0(webpack@5.89.0): + resolution: {integrity: sha512-fX2MWpamkW0hZxMEg0+mYnA40LTosOSa5TqZ9GYIBzyJa9C3QUaMPSE2xAi/buNr8u89SfD9wHSQVBzrRa/SOQ==} + engines: {node: '>= 14.15.0'} + peerDependencies: + webpack: ^5.1.0 + dependencies: + fast-glob: 3.3.1 + glob-parent: 6.0.2 + globby: 13.2.2 + normalize-path: 3.0.0 + schema-utils: 4.2.0 + serialize-javascript: 6.0.1 + webpack: 5.89.0(webpack-cli@5.1.4) + dev: true + /core-js-compat@3.32.2: resolution: {integrity: sha512-+GjlguTDINOijtVRUxrQOv3kfu9rl+qPNdX2LTbJ/ZyVTuxK+ksVSAGX1nHstu4hrv1En/uPTtWgq2gI5wt4AQ==} dependencies: @@ -6584,6 +6602,17 @@ packages: slash: 3.0.0 dev: true + /globby@13.2.2: + resolution: {integrity: sha512-Y1zNGV+pzQdh7H39l9zgB4PJqjRNqydvdYCDG4HFXM4XuvSaQQlEc91IU1yALL8gUTDomgBAfz3XJdmUS+oo0w==} + engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0} + dependencies: + dir-glob: 3.0.1 + fast-glob: 3.3.1 + ignore: 5.3.0 + merge2: 1.4.1 + slash: 4.0.0 + dev: true + /globrex@0.1.2: resolution: {integrity: sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==} dev: true @@ -10747,6 +10776,11 @@ packages: engines: {node: '>=8'} dev: true + /slash@4.0.0: + resolution: {integrity: sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==} + engines: {node: '>=12'} + dev: true + /slice-ansi@3.0.0: resolution: {integrity: sha512-pSyv7bSTC7ig9Dcgbw9AuRNUb5k5V6oDudjZoMBSr13qpLBG7tB+zgCkARjq7xIUgdz5P1Qe8u+rSGdouOOIyQ==} engines: {node: '>=8'} diff --git a/src/index.tsx b/src/index.tsx index 135bea5..7d980c9 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -6,10 +6,7 @@ import App from './App' import './style/index.css' async function prepareApp() { - if ( - process.env.NODE_ENV === 'development' || - process.env.NODE_ENV === 'test' - ) { + if (process.env.MSW_ENABLE) { const { worker } = await import('./__mocks__/browser') return worker.start() } diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts index 97e77df..28f2170 100644 --- a/src/react-app-env.d.ts +++ b/src/react-app-env.d.ts @@ -8,6 +8,7 @@ declare namespace NodeJS { readonly NODE_ENV: 'development' | 'production' | 'test' readonly PUBLIC_PATH: string readonly DEBUG: boolean + readonly MSW_ENABLE: boolean } } diff --git a/webpack/config.ts b/webpack/config.ts index 3a306aa..8246c0d 100644 --- a/webpack/config.ts +++ b/webpack/config.ts @@ -8,7 +8,7 @@ export const NODE_ENV = process.env.NODE_ENV export const IS_DEV = NODE_ENV === 'development' -const ENV_CONFIG_PATH = path.resolve(ROOT_PATH, 'env', `${NODE_ENV}.env`) +const ENV_CONFIG_PATH = path.resolve(ROOT_PATH, 'env', `.env.${NODE_ENV}`) // node 读取env 配置 loadConfig({ @@ -17,7 +17,7 @@ loadConfig({ debug: process.env.DEBUG as unknown as boolean, }) -export const envKeys = ['PUBLIC_PATH'] // todo: coupled with env +export const envKeys = ['NODE_ENV', 'PUBLIC_PATH', 'MSW_ENABLE'] // todo: coupled with env export const PUBLIC_PATH = process.env.PUBLIC_PATH ?? '/' diff --git a/webpack/webpack.production.ts b/webpack/webpack.production.ts index 307f8f3..1bb889a 100644 --- a/webpack/webpack.production.ts +++ b/webpack/webpack.production.ts @@ -4,6 +4,7 @@ import TerserPlugin from 'terser-webpack-plugin' import type { Configuration } from 'webpack' import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer' import merge from 'webpack-merge' +import CopyWebpackPlugin from 'copy-webpack-plugin' // import InlineRuntimeChunkPlugin from './plugins/inline-runtime-chunk-html' import commonConfig from './webpack.common' @@ -40,6 +41,19 @@ const config: Configuration = { }, }, plugins: [ + new CopyWebpackPlugin({ + patterns: [ + { + from: 'public', + to: '', + globOptions: { + ignore: process.env.MSW_ENABLE + ? ['**/index.html'] + : ['**/mockServiceWorker.js', '**/index.html'], + }, + }, + ], + }), new MiniCssExtractPlugin({ // Options similar to the same options in webpackOptions.output // all options are optional