https://github.com/pakholeung37/vite-plugin-import-maps

Use native import-maps in vite.
https://github.com/pakholeung37/vite-plugin-import-maps

import-maps importmaps vite vite-plugin

Last synced: 6 months ago
JSON representation

Use native import-maps in vite.

• Host: GitHub
• URL: https://github.com/pakholeung37/vite-plugin-import-maps
• Owner: pakholeung37
• License: mit
• Created: 2021-11-27T13:23:50.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2022-08-21T18:24:12.000Z (over 2 years ago)
• Last Synced: 2024-11-10T11:31:20.944Z (6 months ago)
• Topics: import-maps, importmaps, vite, vite-plugin
• Language: TypeScript
• Homepage:
• Size: 82 KB
• Stars: 18
• Watchers: 1
• Forks: 2
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vite-plugin-import-maps

Use native browser import-maps in vite. What's [import-maps](https://github.com/WICG/import-maps)

[![NPM](https://nodei.co/npm/vite-plugin-import-maps.png)](https://npmjs.org/package/vite-plugin-import-maps/)

## Usage

Simply add import-maps plugin in vite.config

```javascript

// vite.config.js

const { defineConfig } = require('vite')

const { importMaps } = require('vite-plugin-import-maps')

module.exports = defineConfig({

  plugins: [

    importMaps([

      {

        imports: {

          lodash: 'https://esm.sh/[email protected]',

        },

      },

    ]),

  ],

})

```

Then your module will import from cdn instead of vite pre-bundle module.

Cuz it use native import-maps, itt also allow you to use module in runtime.

```html

  import _, { isNaN } from 'lodash'

  console.log(_.isNaN(NaN)) // true

  console.log(isNaN(NaN)) // true

```

## Limitation

Until now, only Chrome implements the import-maps feature. But it is easy to use a polyfill with [es-module-shims](https://github.com/guybedford/es-module-shims).

And to be ware, due to there is no way for vite to unresolve bare moduleId now, this plugin use an alia with the preifx `/@import-maps/`, which means `import 'lodash'` will transform to `import '/@import-maps/lodash'`.

## License

[MIT](LICENSE)