@leaflink/vite-plugin-importmap

Vite plugin to allow loading dependencies via native import maps, based on vite-plugin-import-maps. It does not re-alias modules on build so can support peer dependencies loaded via import maps.

Installation

$ npm install --save-dev @leaflink/vite-plugin-importmap

Basic Usage

Import and add to the plugins section in your Vite config:

import buildImportMap from '@leaflink/vite-plugin-importmap';

export default defineConfig(({ mode }) => {
  plugins: [
    buildImportMap({
      imports: {
        vue: 'https://unpkg.com/[email protected]/dist/vue.esm-browser.js',
      }
    })
  ]
});

NPM and local development

For local development, version control, and type support, you should still install modules locally as before including those loaded via importmaps. To avoid any issues in local environments, this plugin should not be loaded in development mode.

Import Map Configuration

Import map configuration matches the importmap specification, and consist of an imports property that defines remote paths for imported modules, and an optional scopes property that allows specific routes to use different remote paths. See the MDN importmap documentation for more details.

{
  imports: {
    <import name>: <path to remote>
  },
  scopes?: {
    <scope path>: {
      <import name>: <path to remote>
    }
  }
}