跳到主要內容

How to use third-party dependencies (CDN)

Introduction

Introduction

Although we have implemented handling of the built-in packages for security reasons, we still cannot cover all scenarios.

At this point, developers can introduce third-party dependencies.

How to use third-party dependencies (CDN)

⚠️ Third-party dependencies must be loaded asynchronously, and it is important to load esm format JS!

React component, taking ReactTweetEmbed as an example:

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" />
  );
}

Non-React components, taking Lottie as an example, are shown in the following code:

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>
  );
}

The effect is as follows

FAQ

How to find the ESM version of an npm library

Visit the following site and enter the name of the npm lib you want to use:

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

Then check if there is an esm version and find the corresponding esm link, taking the html-to-image lib as an example.

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

In the end, we obtained

image.png