pakholeung37 / vite-plugin-import-maps

Use native import-maps in vite.

vite-plugin-import-maps

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

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/[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.

<!-- 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

vite-plugin-import-maps's Issues

Adjust plugin dependencies

This is a question / suggestion.

Currently the dep graph looks like this:

"dependencies": {
    "less": "*",
    "sass": "*",
    "stylus": "*",
    "vite": "2.6.14"
  }

• less, sass, and stylus are not used, should be removed.
• vite is only used for types, therefore should be at most a peerDependency, ot maybe just a devDependency.

The plugin fails to work in Vite@3

Describe the bug

In the development environment of Vite@2, after the plugin is executed, <script type="importmap"> is at the top of the head tag, and /@vite/client is below it, this is no problem; but in the development environment of Vite@3, because Vite adjusted the injection rules of the plugin execution result(applyHtmlTransforms function), <script type="importmap"> was under /@vite/client, and the browser could not parse the import maps.

在Vite@2的开发环境中，插件执行完后在head标签中<script type="importmap">位于最顶部，/@vite/client在它下面，这个没有问题；但是在Vite@3的开发环境中，由于Vite调整了插件执行结果的注入规则（applyHtmlTransforms函数），导致<script type="importmap">在/@vite/client下面，浏览器就无法解析 Import maps 了。

System Info

Vite 3.0.8

Personal solution

enforce: 'post', // or delete it

I tested it, it works.

vite --base=/subsystem

当vite dev 时启动 --base importmaps 应该追加 base

ENOENT: no such file or directory, open '/@import-maps/react/jsx-runtime' error during build:

Hi, i have installed this plugin in vite 4 project and i am getting following error:

by the way in dev mode i am facing similar error: