cdn 相关问题

因此，由于我不打算解释的原因，我正在开发一个没有捆绑器（例如，webpack）的 React 应用程序。所以基本上我只是将 React 和 ReactDOM 包含在几个标签中......</desc> <question vote="0"> <div> </div> <p>因此，由于我不打算解释的原因，我正在开发一个没有捆绑器（例如 webpack）的 React 应用程序。所以基本上我只是将 React 和 ReactDOM 包含在我的 <pre><code><script></code></pre> 中的几个 <pre><code>index.html</code></pre> 标签中，从 CDN 获取这些脚本，例如：</p> <pre><code>https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js </code></pre> <p>到目前为止一切顺利，但现在我决定尝试使用 <a href="https://react.dev/reference/react/Suspense" rel="nofollow noreferrer"><pre><code>Suspense</code></pre></a> 和 <a href="https://react.dev/reference/react/use" rel="nofollow noreferrer"><pre><code>use</code></pre></a> 进行实验。后者是仅限金丝雀的功能。</p> <p>我面临的第一个问题是如何找到最新的金丝雀版本，我假设它可以在 <a href="https://github.com/facebook/react/blob/main/CHANGELOG-canary.md" rel="nofollow noreferrer">CHANGELOG-canary.md</a> 文件中找到。这个靠谱吗？</p> <p>然后我刚刚使用 <pre><code>18.3.0-canary-546178f91-20231005</code></pre> 版本更新了应用程序中的上述 URL。但现在我得到两个错误：</p> <ul> <li><p><pre><code>TypeError: Cannot read properties of undefined (reading 'unstable_cancelCallback')</code></pre>;</p> </li> <li><p><pre><code>TypeError: ReactDOM.createRoot is not a function</code></pre>.</p> </li> </ul> <p>看来，<em>现在</em>，<pre><code>createRoot</code></pre>已经搬进了<pre><code>react-dom/client</code></pre>。但这对于 CDN 来说意味着什么？好像到处都找不到...</p> </question> <answer tick="false" vote="0"> <p>您可以使用 cdnjs.com 的 canary cdn。同时使用：<a href="https://cdnjs.com/libraries/react" rel="nofollow noreferrer">react</a>和<a href="https://cdnjs.com/libraries/react-dom" rel="nofollow noreferrer">react-dom</a></p> <p>一个例子如下（摘自<a href="https://react.dev/reference/react/use#streaming-data-from-server-to-client" rel="nofollow noreferrer">这里</a>）：</p> <p></p><div data-babel="true" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>const {useState, use, Suspense} = React; function fetchMessage() { return new Promise((resolve) => setTimeout(resolve, 1000, "⚛️")); } function Message({ messagePromise }) { const messageContent = use(messagePromise); return <p>Here is the message: {messageContent}</p>; } function MessageContainer({ messagePromise }) { return ( <Suspense fallback={<p>⌛Downloading message...</p>}> <Message messagePromise={messagePromise} /> </Suspense> ); } function App() { const [messagePromise, setMessagePromise] = useState(null); const [show, setShow] = useState(false); function download() { setMessagePromise(fetchMessage()); setShow(true); } if (show) { return <MessageContainer messagePromise={messagePromise} />; } else { return <button onClick={download}>Download message</button>; } } // Render it ReactDOM.createRoot( document.getElementById("root") ).render( <App /> );</code></pre> <pre><code><div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.0-next-fecc288b7-20221025/umd/react.development.js" integrity="sha512-wAlnoquw4XeCdM3WisHU+pBzyK6+MRDmvVARL0SVypHSQzi4/AaMYIfiQqymhIj0+/Uqvpb/gnsNcKBd/gPAPw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.0-next-fecc288b7-20221025/umd/react-dom.development.min.js" integrity="sha512-5eIpFCkBiLzn4FcK+v2p7eCV2plP4cw5fqJDr3+K/4BZQUNDmylQ85X0w0fkWd5maTN7eNhesjXZHrdJRKXxmw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script></code></pre> </div> </div> <p></p> </answer> </body></html>

javascript reactjs cdn

回答 0 投票 0

我们如何创建自己的React.js组件作为CDN链接？

我的 Next.js 应用程序中有一个聊天机器人组件，我希望任何人都可以使用在其网站中用作聊天机器人 <question vote="1"> <p>我的 Next.js 应用程序中有一个聊天机器人组件，我希望任何人都可以使用 <script tag. Suppose I put component in my public folder to have public access.</p> 在其网站中用作聊天机器人 <p>我如何实现这种功能，以便任何人都可以在其应用程序的脚本标签中添加此链接并访问我的聊天机器人</p> <pre><code><script type="module" src="https://my-app-url/Chatbot.js" defer></script> </code></pre> <p><a href="https://i.stack.imgur.com/NQALo.png" target="_blank"><img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tL05RQUxvLnBuZw==" alt=""/></a></p> </question> <answer tick="false" vote="1"> <p>最简单的方法是使用 <pre><code>iframe</code></pre>。</p> <p>您可以使用仅包含聊天机器人组件的页面托管 Next.js 应用程序，并将背景颜色设置为透明。</p> <pre><code>background-color : transparent; </code></pre> <p>然后，任何有权访问您的应用程序的人都可以使用 <pre><code>iframe</code></pre> 将聊天机器人嵌入到他们自己的网站中。添加<pre><code>allowtransparency="true"</code></pre>即可达到您想要的效果。</p> <pre><code><iframe src="https://your-nextjs-app/chatbot-page" allowtransparency="true"></iframe> </code></pre> <p><a href="https://www.geeksforgeeks.org/how-to-create-a-transparent-iframe/" rel="nofollow noreferrer">有关 iframe 允许透明度的更多信息</a>。</p> <hr/> <p>使用 javascript 创建 iframe：</p> <pre><code>// Create the iframe element var iframe = document.createElement('iframe'); // Set the iframe attributes iframe.src = 'https://your-nextjs-app/chatbot-page'; iframe.style.position = 'fixed'; iframe.style.bottom = '0'; iframe.style.right = '0'; iframe.style.width = '400px'; iframe.style.height = '600px'; iframe.style.border = 'none'; iframe.style.opacity = '0.5'; iframe.style.zIndex = '9999'; iframe.allowtransparency = true; iframe.style.backgroundColor = 'transparent'; // Append the iframe to the document body document.body.appendChild(iframe); </code></pre> </answer> </body></html>

javascript html reactjs cdn

回答 0 投票 0

负载均衡器与 CDN

据我了解，CDN 是一个代理，它只是在位于不同区域的服务器之间分割流量（请求应由最近的地理服务器处理）。然而，Loadbala...

networking server backend load-balancing cdn

回答 2 投票 0

Vue3 我必须使用 SPA 或 CDN 吗？

我查看了vue3文档。发现我不仅可以使用 npm 启动 vue3，还可以将 cdn 脚本标签嵌入到 html 文件中。我查看了这里的帖子如何使用组件...

vue.js vuejs3 single-page-application cdn

回答 1 投票 0

“使用像 Cloudflare 这样的 CDN 可以帮助我创建一个使用多种声音而不会使服务器带宽超载的页面吗？

我有一个页面，允许同时广播多个声音（每个声音文件 40MB），但问题是我无法同时播放许多声音，而不会在 5-6 个声音后冻结。 ...