从官方文档看 parcel仍然是一个application,只是使用场景有所区别
官方链接
以下是使用方式,
第一步:先按照官方文档说明创建一个rootconfig
第二步,按照官方文档说明创建一个application(以下称为app1)
第三步,按照官方文档说明创建一个parcel(仍然是一个application,以下称为app2)
第四步,将app1注册到rootconfig
第五步,app2添加到rootconfig中的importmap中
rootconfig中index.ejs中的importmap的配置
<% if (isLocal) { %>
<script type="systemjs-importmap">
{
"imports": {
"@Root/root-config": "//localhost:9000/Root-root-config.js",
"@One/Test": "//localhost:8500/One-Test.js",
"@two/test": "//localhost:8600/two-test.js",
"react": "https://cdn.jsdelivr.net/npm/react@16.13.1/umd/react.production.min.js",
"react-dom": "https://cdn.jsdelivr.net/npm/react-dom@16.13.1/umd/react-dom.production.min.js",
***"Test-Exception-parcel":"//localhost:8700/Test-Exception.js"***
}
}
</script>
<% } %>
第六步,在app1中引用app2
import React, { Component } from 'react'
import Parcel from 'single-spa-react/parcel'
export default class first extends Component {
render() {
return (
<div>
adfadf
<Parcel
config={() => System.import('Test-Exception-parcel')}
/>
</div>
)
}
}
Test-Exception-parcel名称是parcel在rootconfig中的importmap中的名称
以下截图是访问app1微前端时挂载parcel(app2)页面展示
parcel demo链接