跳到主要内容

如何使用第三方依赖（CDN）

前言

前言

尽管我们为了安全起见，进行了内置包的处理，但是依然无法覆盖所有场景

这时候开发者可以进行第三方依赖的引入

如何使用第三方依赖（CDN）

⚠️，第三方依赖必须以异步的形式加载，注意需要加载 esm 格式的 js！

React 组件，以 ReactTweetEmbed 为例：

javascript
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 为例，代码如下：

javascript
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 名称：

jsDelivr - A free, fast, and reliable CDN for JS and Open Source

然后看是否有 esm 版本，并找到对应的 esm 链接，以 html-to-image lib 为例

html-to-image CDN by jsDelivr - A CDN for npm and GitHub

最终我们得到了

image.png