diff --git a/README.md b/README.md index cd70b19..2602112 100644 --- a/README.md +++ b/README.md @@ -2,12 +2,12 @@ Use `single-spa` `systemjs` in your `create-react-app`. -> Quickly adapt `react-scripts` as a submodule of single-spa !!! +> Quickly adapt `react-scripts` as a submodule of single-spa !!! > Support `react-scripts@4.x` `react-scripts@5.x` version. ## Features -- Support `react-scripts@5.x` compatible with common configuration migrations +- Support `react-scripts@5.x` compatible with common configuration migrations - Output `systemjs` library auto add `SystemJSPublicPathPlugin` - Support `ReactFastRefresh` hot refresh @@ -58,52 +58,84 @@ module.exports = { ## Options ### orgName -Type: `string` + +Type: `string` The name of the organization this application is written for. ### projectName -Type: `string` + +Type: `string` The name of the current project. This usually matches the git repo's name. ### entry -Type: `string` -Default: `src/{orgName}-{projectName}.{js|jsx|ts|tsx}` `src/index.{js|jsx|ts|tsx}` + +Type: `string` +Default: `src/{orgName}-{projectName}.{js|jsx|ts|tsx}` `src/index.{js|jsx|ts|tsx}` The entry file. ### outputFilename -Type: `string` -Default: - - development `{orgName}-{projectName}.[contenthash:8].js` - - production `{orgName}-{projectName}.js` + +Type: `string` +Default: + +- development `{orgName}-{projectName}.[contenthash:8].js` +- production `{orgName}-{projectName}.js` ### rootDirectoryLevel -Type: `number` + +Type: `number` This is the rootDirectoryLevel that is passed to https://github.com/joeldenning/systemjs-webpack-interop. ### reactPackagesAsExternal + Type: `boolean` This will `react` `react-dom` as webpack externals or not. ### orgPackagesAsExternal -Type: `boolean` + +Type: `boolean` This changes whether package names that start with @your-org-name are treated as webpack externals or not. ### peerDepsAsExternal + Type: `boolean` This will package.json `peerDependencies` as webpack externals or not. ## FQA ### FastRefresh invalid -- If `react` `react-dom` is external, `react-dev-tool` must be installed to refresh automatically. -For details, please see https://github.com/facebook/react/issues/17552 + +- If `react` `react-dom` is external, `react-dev-tool` must be installed to refresh automatically. + For details, please see https://github.com/facebook/react/issues/17552 - Check whether the ws connection is normal, you can set in `.env` file - `WDS_SOCKET_PORT` "2002" - `WDS_SOCKET_HOST` "localhost" - `WDS_SOCKET_PATH` "/projectName" **Please start with "/"** - > The default hotreload client uses the relative website protocol, - which is the protocol of the main base. It can use the localhost - protocol and the local development port. + > The default hotreload client uses the relative website protocol, + > which is the protocol of the main base. It can use the localhost + > protocol and the local development port. + +### webpack < 5 used to include polyfills for node.js core modules by default + +The following packages have been integrated by default, and the specified dependencies can be installed directly in the project. + +```json +{ + "url": "url", + "fs": "fs", + "assert": "assert", + "crypto": "crypto-browserify", + "http": "stream-http", + "https": "https-browserify", + "os": "os-browserify/browser", + "buffer": "buffer", + "stream": "stream-browserify" +} +``` + +### You attempted to import XXXXXXXX which falls outside of the project src/ directory + +You can use `customize-cra` `removeModuleScopePlugin()` ## License