Socket
Book a DemoInstallSign in
Socket

vite-plugin-import-maps

Package Overview
Dependencies
Maintainers
1
Versions
3
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vite-plugin-import-maps

Use native import-maps in vite

latest
Source
npmnpm
Version
0.1.2
Version published
Maintainers
1
Created
Source

vite-plugin-import-maps

Use native browser import-maps in vite. What's import-maps

NPM

Usage

Simply add import-maps plugin in vite.config

// vite.config.js
const { defineConfig } = require('vite')
const { importMaps } = require('vite-plugin-import-maps')

module.exports = defineConfig({
  plugins: [
    importMaps([
      {
        imports: {
          lodash: 'https://esm.sh/lodash-es@4.17.20',
        },
      },
    ]),
  ],
})

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.

<!-- index.html -->
<script type="module">
  import _, { isNaN } from 'lodash'

  console.log(_.isNaN(NaN)) // true
  console.log(isNaN(NaN)) // true
</script>

Limitation

Until now, only Chrome implements the import-maps feature. But it is easy to use a polyfill with 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

Keywords

vite

FAQs

Package last updated on 27 Nov 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts