How to use third-party dependencies (CDN)
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:
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:
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:
Then check if there is an esm version and find the corresponding esm link, taking the html-to-image lib as an example.
In the end, we obtained
1 条评论
Thanks for doing this! This will open a whole new world of options and opportunities to build! So hyped!