将前端库导入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/other 库参考。 iFrame（WIX HTML 元素）托管在同一来源。

我还可以使用 node.js 代码和列出的 npm 模块 here

想法？

Answer 1

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

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

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

您可以使用 javascript 直接操作 dom 或通过类似 React 的框架的唯一方法是使用 htmlComponent 在 iframe 中进行沙盒处理。

Importing frontend libraries into wix website