Package Exports

vite-plugin-dynamic-import
vite-plugin-dynamic-import/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vite-plugin-dynamic-import) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

vite-plugin-dynamic-import

Enhance Vite builtin dynamic import

English | 简体中文

Support alias
Based on the glob looser restrictions

Install

npm i vite-plugin-dynamic-import -D

Usage

import dynamicImport from 'vite-plugin-dynamic-import'

export default {
  plugins: [
    dynamicImport()
  ]
}

API

DynamicImport([options])

options: DynamicImportOptions

export interface DynamicImportOptions {
  filter?: (...args: Parameters<Plugin['transform']>) => false | void | Promise<false | void>
}

See the filter args vite/src/node/plugin.ts#L131

How and why?

We assume that the project structure is as follows

├─┬ src
│ ├─┬ views
│ │ ├─┬ foo
│ │ │ └── index.js
│ │ └── bar.js
│ └── router.js
└── vite.config.js

// vite.config.js
export default {
  resolve: {
    alias: {
      // "@" -> "/User/project-root/src/views"
      '@': path.join(__dirname, 'src/views'),
    },
  },
}

Dynamic import is not well supported in Vite, such as

Alias are not supported

// router.js
❌ import(`@/views/${variable}.js`)

Must be relative

// router.js
❌ import(`/User/project-root/src/views/${variable}.js`)

Must have extension

// router.js
❌ import(`./views/${variable}`)

We try to fix these problems

For the alias in import(), we can calculate the relative path according to UserConfig.root

// router.js
✅ import(`./views/${variable}.js`)

If the import path has no suffix, we use glob to find the file according to UserConfig.resolve.extensions and supplement the suffix of the import path.
So we need to list all the possibilities

transpire dynamic import variable, yout can see @rollup/plugin-dynamic-import-vars

./views/${variable} -> ./views/*

generate runtime code

- // import(`./views/${variable}`)
+ __variableDynamicImportRuntime(`./views/${variable}`)

+ function __variableDynamicImportRuntime(path) {
+   switch (path) {
+     case 'foo':
+     case 'foo/index':
+     case 'foo/index.js':
+       return import('./views/foo/index.js');
+ 
+     case 'bar':
+     case 'bar.js':
+       return import('./views/bar.js');
+ }