This plugin allow you to load assets from CDN by using top level await and import function
yarn add -D babel-plugin-await-import-from-cdn @babel/plugin-syntax-top-level-await
or
npm i -D babel-plugin-await-import-from-cdn @babel/plugin-syntax-top-level-await
module.exports = {
presets: [
'@babel/preset-env',
],
plugins: [
'@babel/plugin-syntax-top-level-await',
['babel-plugin-await-import-from-cdn', {
host: 'https://cdn.skypack.dev',
webpackIgnore: true,
}],
],
};
Using this configuration, following code
import React from 'react';
will transpile into
const {
default: React
} = await import(
/* webpackIgnore: true */
"https://cdn.skypack.dev/react@^17.0.1");
For more detail, please check the base use example of this repo
The host url of the CDN provider, for example https://skypack.dev, https://cdnjs.com, https://unpkg.com
if build application with webpack, set webpackIgnore to true;
If fallback is set, will try to load assets from CDN, then will ues fallback to load assets
if matches is set, Only matched package will transpile to use CDN assets
If not set, will match all packages in dependencies
matches: {
'^react$': true,
},