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'),
);

2. 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.
      },
    ],
  ],
}

3. 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')
);