将父类中定义的脚本和样式注入iframe。
我正在构建一个组件库/css框架，我想在iframe中演示它，以将样式与页面隔离开来。我的设置是Next.js (文档/我想要演示的地方)和Vite.js (用于库代码)的单一程序。
对于呈现iframe，我使用的是react-frame-component。
我有一个类似于库的条目脚本文件：
// vite-repo, loads all the styling:
import './index.scss'
//
function init() {
}
init() 然后，在react组件/页面中，我可以这样导入它：
// documentation/demo page
import Frame from 'react-frame-component'
import 'vite-repo' // loads the style of lib and executes the init function, want to do this on the iframe instead.
return Page() {
// need to inject the styles and js to iframe (react-frame-component).
<Frame>
</Frame>
}知道我该怎么做吗？构建库，然后像这样导入它们，但是我也希望能够在dev上这样做(还没有访问构建包)。
// documentation/demo page
return Page() {
// Inject the styles and js to the iframe.
<Frame head={
<script src="/library.min.js"></script>
<link rel="stylesheet" href="/library.min.css"></link>
}>
</Frame>
}回答 2
Stack Overflow用户
发布于 2022-09-29 02:10:22
您可以更改库代码中的dev命令，以便在库代码更改时构建产品包。
https://vitejs.dev/guide/build.html#rebuild-on-files-changes
vite build --watchStack Overflow用户
发布于 2022-09-29 02:28:36
我可以建议稍微改变一下吗？据我所知，您有您的库代码，然后您有一些开发游乐场和docs站点( NextJS应用程序)。保持库代码分离是一个很好的设计决策。
你的设置应该像这样。
<!-- file: component-library/src/index.html -->
<html>
...
<script src="/main.js" /> <!-- the entrypoint to your library -->
</html>在这里会注意到，
main.js(您目前拥有init函数的地方)应该是用于您的开发时操场，使用类似index.js之类的东西供您的消费者导入。
// file: nextjs/app/routes/demo.jsx
// Note; you don't need `react-frame-component` your sandboxed vite app can handle that part.
function DemoPage() {
return <iframe src="http://localhost:3000"></iframe>;
}
export default DemoPage;完成了，现在您所需要的就是像往常一样运行nextjs应用；
npm run dev # or whatever start command you have然后在一个独立的终端运行您的演示应用程序；
vite --port 3000或作为一个单独的命令
vite --port 3000 & next dev(&，因此它们同时运行)
在这里，您应该让站点应用程序在沙箱/iframe中运行，远离您的nextjs应用程序。
https://stackoverflow.com/questions/73784906
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号