如何使用第三方依赖（CDN）
前言#
尽管我们为了安全起见，进行了内置包的处理，但是依然无法覆盖所有场景
这时候开发者可以进行第三方依赖的引入
如何使用第三方依赖（CDN）#
⚠️，第三方依赖必须以异步的形式加载，注意需要加载 esm 格式的 js！
React 组件，以 ReactTweetEmbed 为例：
import React from '@blocklet/pages-kit/builtin/react';
const T = React.lazy(() => import('https://cdn.jsdelivr.net/npm/react-tweet-embed@2/+esm'));
export default function () {
return (
<T tweetId="1811849042001035287" />
);
}非 React 组件，以 Lottie 为例，代码如下：
import React from '@blocklet/pages-kit/builtin/react';
import { Box } from '@blocklet/pages-kit/builtin/mui/material';
export default function () {
React.useEffect(() => {
import('https://cdn.jsdelivr.net/npm/@lottiefiles/lottie-player@2.0.3/+esm')
}, [])
return (
<Box>
Hello World
<lottie-player
autoplay
loop
mode="normal"
src="https://www.aikit.rocks/.blocklet/proxy/z8iZvMrKPa7qy2nxfrKremuSm8bE9Wb9Tu2NA/assets/lottie-welcome-W07w6pFE.json"
/>
</Box>
);
}效果如下
FAQ#
如何找到 npm lib 的 esm 版本#
到下面这个站点，输入想要使用的 npm lib 名称：
然后看是否有 esm 版本，并找到对应的 esm 链接，以 html-to-image lib 为例
最终我们得到了
1 条评论
Thanks for doing this! This will open a whole new world of options and opportunities to build! So hyped!