This plugin allow you to load assets from CDN by using top level await and import function

Install

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

Usage

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

Options

host

The host url of the CDN provider, for example https://skypack.dev, https://cdnjs.com, https://unpkg.com

webpackIgnore

if build application with webpack, set webpackIgnore to true;

fallback

If fallback is set, will try to load assets from CDN, then will ues fallback to load assets

matches

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,
},