阿波罗工作室可嵌入沙盒
这个 repo 主机为 Aporo Studio 的可嵌入沙盒的源文件
使用 @ apollo/ sandbox npm 软件包
您可以下载 @ apollo/ sandbox npm 软件包 npm install @apollo/sandbox。然后,您可以导入 AporoSandbox 类或 AporoSandbox 反应组件 :
import { ApolloSandbox } from '@apollo/sandbox';
import { ApolloSandbox } from '@apollo/sandbox/react';
当你用一个 target 在你的应用软件中,Sandbox会出现在这个元素的iframe中。 检查所有的 配置选项 你的图表.
反应
import { ApolloSandbox } from '@apollo/sandbox/react';
function App() {
return (
<ApolloSandbox />
);
}
香草联署材料
import { ApolloSandbox } from '@apollo/sandbox';
function App() {
...
new ApolloSandbox({
target: '#embeddableSandbox',
})
...
}
...
// style the iframe for your site
<style>
iframe {
height: 100%;
width: 100%;
border: none;
}
</style>
<div id="embeddableSandbox" />
原始 cdn 主机 umd 文件的实例
开发嵌入式沙盒
运行 npm run build:umd 以构建嵌入式Sandbox在窗口上曝光的 umd 文件.
打开 examples/localDevelopmentExample.html 测试您的变化。 (如果来源未设定, 请运行本地DevelopmentExample.html from Live Server(中文(简体) )
安装 Live Server 扩展到 localDevelopmentExample.html 点击“Go Live”
以反应为例开发嵌入式沙盒
运行 npm run build:cjs-esm 用于构建 cjs & esm 文件,其中阿波罗Sandbox & 阿波罗Sandbox React 被命名为导出.
我们有一个反应实例应用程序,它使用我们的阿波罗Sandbox反应组件,使嵌入式沙盒位于src/examples/resact-example. 举个例子, npm run build 财务报告和审定财务报表 npm run start 内 react-example。在重建新的更改前,请确保删除 .parcel-cache 文件夹。 (TODO去掉包裹缓存)