CRA（create-react-app）项目改造成single-spa的子项目single-spa生成基础项目，并将

这篇先简单的修改CRA的项目，让create-reat-app生成的项目能被基础项目引用。

全局注册create-single-spa （我的node版本是16.15.1），create-react-app同理

npm install --global create-single-spa
# or
yarn global add create-single-spa

1、先建一个基础项目proj-base（需要安装git）

create-single-spa proj-base

2、用create-react-app建一个子项目proj-child1

create-react-app proj-child1

创建完之后开始改造proj-child1(都是再proj-child1下执行)：

2.1 删掉package.json的dependencies和scripts

2.2 执行

yarn create single-spa

选择类型为 application / parcel，允许重写package.json
organize name写proj，project name写child1

2.3 修改src下的文件proj-child1.js(organize name - project name )，将

rootComponent: Root =》 rootComponent: App，去加载react项目本身的App.js，然后就可以删掉原本Root组件的那个文件了

3、修改proj-base

3.1 src/index.ejs，引入proj-child1，属性名是proj-child1的package.json里name字段的值，引入react、react-dom、react-router-dom


<% if (isLocal) { %>  
<script type="systemjs-importmap">    
{     
"imports": {    
  "react":"https://unpkg.com/react@18/umd/react.production.min.js",
  "react-dom":"https://unpkg.com/react-dom@18/umd/react-dom.production.min.js",
  "react-router-dom":"https://unpkg.com/react-router-dom@6/umd/react-router-dom.production.min.js",
 "@single-spa/welcome": "https://unpkg.com/single-spa-welcome/dist/single-spa- welcome.js",       
 "@proj/root-config": "//localhost:9000/proj-root-config.js"     
 "@proj/child1": "//localhost:8080/proj-child1.js"        
  }    
}
</script> 
<% } %>

3.2 src/microfrontend-layout.html修改要加载的application


<main>   
<route default> 
<application name="@proj/child1"></application>   
<!-- <application name="@single-spa/welcome"></application> -->   
</route> 
</main>

4、启动proj-child1，启动proj-base，就能看到，proj-base加载的是proj-child1的内容

参考视频和网站：
CRA改造single-spa项目
 single-spa官网