1

我正在尝试使用采用 Web 组件方法的微前端创建一个演示应用程序。我需要做什么才能将定义的自定义元素从一个微前端用于拼接层？

我已经采用了 IFrame 路线并使用了单水疗，这两种方法都可以使用，但这次我尝试使用 Web 组件，但没有成功。我还尝试将微前端添加到 docker 容器中，但这并没有带来任何改变。

我在微前端中定义我的自定义元素，如下所示：

class CommentSection extends HTMLElement {
  connectedCallback() {
    ReactDOM.render(<App />, this.attachShadow({mode: 'open'}));
  }
}
window.customElements.define('comment-section', CommentSection);

我在微前端使用它index.html：

<comment-section></comment-section>

到目前为止一切正常。当我尝试从拼接层使用它时，我的问题就出现了。

在 React 应用程序中，我创建了一个server.js文件来传递内容：

server.get('/', (req, res) => {
  const htmlPath = path.resolve(__dirname, 'build', 'index.html');

  fs.readFile(htmlPath, 'utf8', (err, html) => {
    const rootElem = '<comment-section>';
    const renderedApp = renderToString(React.createElement(App, null));

    res.send(html.replace(rootElem, rootElem + renderedApp));
  });
});

server.use(express.static('build'));

从拼接层，创建一个指向微前端的代理：

app.use(express.static(__dirname + '/public'));

const createProxy = (path, target) => {
    app.use(path, proxy({ target, changeOrigin: true, pathRewrite: {[`^${path}`]: ''} }));
}

createProxy('/react', 'http://localhost:3000');

app.get('/', (req, res) => res.render('index'));

并在拼接中像这样导入它index.html：

<head>
  <link href="/react" rel="import" async/>
</head>
<body>
  <comment-section></comment-section>
</body>

我期望 web 组件在拼接层中渲染 react 组件，就像我在隔离运行微前端时所做的那样，但实际结果是所有代码都在linkhtml 导入标签下并且没有渲染任何内容在 web 组件标签下。

Web 组件微前端 Web 组件微前端

web组件拼接层 web组件拼接层

4

1 回答 1

0

您的示例看起来过于复杂。Web 组件由两部分组成：自定义元素和定义它的脚本。

因此，要呈现 Web 组件，您只需将脚本添加到目标 html，<script src="/static/js/xxx.js"></script>就您而言，仅此而已。不需要 Docker、Proxy 等。

换句话说：你应该在任何你放置它的地方使用 Web 组件，就像在你的“微前端”index.html 文件中一样。

关于这一点<link ref="import">：不推荐使用 HTML 导入（Chrome：https ://www.chromestatus.com/feature/5144752345317376 Firefox：https ://developer.mozilla.org/en-US/docs/Web/Web_Components/HTML_Imports ）

于 2019-05-15T12:22:41.897 回答