unplugin-skypin

Skypin plugin support across all Unplugin platforms.

Usage no npm install needed!

<script type="module">
  import unpluginSkypin from 'https://cdn.skypack.dev/unplugin-skypin';
</script>

README

Skypin Logo

unplugin-skypin

Bringing Skypack's power to platforms supported by Unplugin!

Vite Logo Vite   |   Rollup Logo Rollup   |   Nuxt Logo Nuxt   |   Webpack Logo Webpack 4-5


Inspired by rollup-plugin-skypin


NPM Version Dependencies Status Dev Dependencies Status

Options

  • packages (Type: string[], Default: []): Declare the package imports that should be changed here. This is done manually opposed to automatically because Unplugin performs some low-level operations that can involve accessing dependencies that were never intended to be. Packages are able to prefetched through this method too, so there are extra performance benefits.
  • minify (Type: boolean, Default: true): Whether to use Skypack's minified asset.
  • replace (Type: function(id: string) => boolean|string, Default: () => true): Uses a returned string as the package id. Returning a boolean value simply toggles Skypack URL substitution.

Notes

  • Nuxt is supposed to work but has not yet been tested.
  • Webpack is not currently supported.

Usage

Vite
// vite.config.{m}js
import skypin from 'unplugin-skypin/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    skypin({
      packages: [
        /* imports to change here */
      ],
      /* other options */
    }),
  ],
})


Rollup
// rollup.config.{m}js
import skypin from 'unplugin-skypin/rollup'

export default {
  input: 'src/index.js',
  output: {
    dir: 'dist',
    format: 'esm',
  },
  plugins: [
    skypin({
      packages: [
        /* imports to change here */
      ],
      /* other options */
    }),
  ],
}


Webpack
// webpack.config.{c}js
module.exports = {
  /* ... */
  plugins: [
    require('unplugin-skypin/webpack').default({ /* options */ })
  ]
}


Nuxt
// nuxt.config.{m}js
export default {
  buildModules: [
    ['unplugin-skypin/nuxt', { /* options */ }],
  ],
}

This module works for both Nuxt 2 and Nuxt Vite


Vue CLI
// vue.config.{c}js
module.exports = {
  configureWebpack: {
    plugins: [
      require('unplugin-skypin/webpack').default({ /* options */ }),
    ],
  },
}


Development

pnpm i

Check the package.json for the available scripts.