将前端库导入wix网站

Question

我已经使用 CRA 开发了一个 React 应用程序，我正在尝试将其托管在现有的 wix 页面上。通过 WIX，我可以使用 javascript 文件，因此我将应用程序代码与依赖项捆绑到一个文件中，并尝试将 React 和 React-dom 代码从其官方 CDN 复制并粘贴到我的目录中。

不知怎的，它仍然不起作用，在react-dom.js中我看到错误：

'window' is not defined

虽然现在我尝试仅使用react和react-dom导入，但问题通常适用于将js前端库导入到WIX中。

我需要将应用程序代码托管在 wix 页面内，但我认为如果我使用 iframe 中的 cdns 添加应用程序依赖项，它应该可以正常工作，有点像本主题，然后使用 wix 语法引用它

let React = $w("#elementid").window.React;

获取 iframe，然后从那里获取 React/其他库引用。iFrame（WIX HTML 元素）托管在同一源中。

我还可以使用此处列出的 Node.js 代码和 npm 模块

想法？

Answer 1

您不能直接在 Wix 代码页面上使用本机 React 代码。

\n\n

您可以编写 HTML 文档并将其加载到 iframe 元素中，但出于安全原因，代码需要在 iframe 中运行。您可以仅在 iframe 元素中使用 postMessage 和 onMessage 函数在 iframe 和 Wix 代码页面之间交换消息。

\n\n

https://www.wix.com/code/reference/$w.HtmlComponent.html

\n\n

https://support.wix.com/en/article/wix-code-working-with-the-html-element

\n\n

你可以包含nodejs包（一旦获得批准），只要它们不\xe2\x80\x99t尝试直接操作dom。您需要像考虑 jquery 框架一样考虑 Wix 代码页面。主页面范围选择器 $w 是页面元素所在的位置。只有在 Wix 编辑器上定义的元素才能通过 $w 范围选择器或相关事件处理程序进行操作。

\n\n

使用 javascript 直接操作 dom 或通过 React 等框架的唯一方法是使用 htmlComponent 将其沙箱化在 iframe 中。

\n