-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
2 changed files
with
89 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -2,7 +2,14 @@ | |
|
||
Use `single-spa` `systemjs` in your `create-react-app`. | ||
|
||
> Quickly adapt cra as a submodule of single-spa !!! | ||
> Quickly adapt `react-scripts` as a submodule of single-spa !!! | ||
> Support `[email protected]` `[email protected]` version. | ||
## Features | ||
|
||
- Support `[email protected]` compatible with common configuration migrations | ||
- Output `systemjs` library auto add `SystemJSPublicPathPlugin` | ||
- Support `ReactFastRefresh` hot refresh | ||
|
||
## Installation | ||
|
||
|
@@ -35,11 +42,69 @@ module.exports = { | |
const { override, overrideDevServer } = require("customize-cra"); | ||
|
||
module.exports = { | ||
webpack: override(rewiredSingleSpa()), | ||
webpack: override( | ||
rewiredSingleSpa({ | ||
orgName: "you", | ||
projectName: "test", | ||
reactPackagesAsExternal: true, | ||
peerDepsAsExternal: true, | ||
orgPackagesAsExternal: true, | ||
}) | ||
), | ||
devServer: overrideDevServer(rewiredSingleSpaDevServer()), | ||
}; | ||
``` | ||
|
||
## Options | ||
|
||
### orgName | ||
Type: `string` | ||
The name of the organization this application is written for. | ||
|
||
### projectName | ||
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}` | ||
The entry file. | ||
|
||
### outputFilename | ||
Type: `string` | ||
Default: | ||
- development `{orgName}-{projectName}.[contenthash:8].js` | ||
- production `{orgName}-{projectName}.js` | ||
|
||
### rootDirectoryLevel | ||
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` | ||
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 | ||
- 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. | ||
|
||
## License | ||
|
||
MIT © [fupengl](https://github.com/fupengl) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters