vite-plugin / vite-plugin-dynamic-import

Enhance Vite builtin dynamic import
https://www.npmjs.com/package/vite-plugin-dynamic-import
MIT License
193 stars 11 forks source link

[Feature Request] Import map support #71

Open HexaField opened 9 months ago

HexaField commented 9 months ago

Hey there, I am curious to know if it is possible to add import map support.

Thanks.

yejimeiming commented 8 months ago

Hey! Can you elaborate on you ideas? 🤔

HexaField commented 8 months ago

Hey! Can you elaborate on you ideas? 🤔

I would like to dynamically import specific chunks via import maps

The code would look like

export function importCustomModule(moduleName: string) {
    return import(moduleName)
}

Which avoids the drawback of dynamic imports not having deep variable imports or having to specify the extension

yejimeiming commented 8 months ago

The import(moduleName) doesn't seem to have any path context, which actually goes against the concept of Rollup parsing modules. The module id must be starts wiht ./ or ../ 👉 Rollup imports limitation


If you want to import modules as you please, there is a way to do it.

export function importCustomModule(moduleName: string) {
-   return import(moduleName)
+   return import(`@/${moduleName}`)
}

Configuration the alias option.

// vite.config.ts

export {
  resolve: {
    // The vite-plugin-dinamic-import will automatically calculate the relative path.
    alias: { '@': __dirname },
  },
}

I'm not sure if this will make you feel embarrassed, if that's the case. You can also dynamically specify the context path of import(moduleName).

// vite.config.ts

export defalut {
  plugins: [
    dynamicImport({
      onResolve(rawImportee) {
        return contextPath + rawImportee;
      },
    }),
  ],
}
HexaField commented 8 months ago

https://github.com/WICG/import-maps

The moduleName string would be an import map identifier. Vite supports import maps.

yejimeiming commented 7 months ago

Perhaps, we need an new plugin for import map. vite-plugin-dynamic-import
The purpose of design vite-plugin-dynamic-import is just for fix some edgge cases when use the import() syntax is used in Vite.