snowpack-plugin-cdn-import

Convert node_modules dependency import to remote CDN import.

Usage no npm install needed!

<script type="module">
  import snowpackPluginCdnImport from 'https://cdn.skypack.dev/snowpack-plugin-cdn-import';
</script>

README

snowpack-plugin-cdn-import

A Snowpack plugin that modify your import resource to obtain from the CDN.

Work on modern browsers.

Based on snowpack-plugin-import-maps.

Quick Start

  1. Write your code as usually:
import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <h1>Hello world!</h1>,
  document.getElementById('root'),
);
  1. Install and configure plugin:
npm i -D snowpack-plugin-cdn-import

Edit snowpack.config.js:

module.exports = {
  ...
  plugins: [
    ...
    ['snowpack-plugin-cdn-import',
      {
        dependencies: require('./package.json').dependencies,
        ignore: ['@some/module', /^@another/],
        baseUrl: 'https://cdn.skypack.dev', // default value.
        extensions: ['.js', '.jsx','.tsx', '.ts'], // default value.
        enableInDevMode: false, // default value.
        formatImportValue: ({ baseUrl, dependency }) =>
          `${baseUrl}/${dependency.name}@${dependency.version}`, // default value.
      },
    ],
  ],
}
  1. Run npm run build or npm start

And you will get result like this:

import React from "https://cdn.skypack.dev/react@^16.13.1";
import ReactDOM from "https://cdn.skypack.dev/react-dom@^16.13.1";

ReactDOM.render(
  React.createElement("h1", null, "Hello world!"),
  document.getElementById('root')
);