@leaflink/vite-plugin-importmap

@leaflink/vite-plugin-importmap

Vite plugin to allow loading dependencies via native import maps, based on vite-plugin-import-maps.

Installation

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

Basic Usage

Import the buildImportMap function and add to the plugins section of your Vite config.

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

export default defineConfig(({ mode }) => {
  plugins: [
    buildImportMap({
      imports: {
        vue: 'https://unpkg.com/vue@3.3.4/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>
    }
  }
}