Enhance Vite builtin dynamic import
English | 简体中文
✅ Alias
✅ Bare module(node_modules)
✅ Compatible @rollup/plugin-dynamic-import-vars limitations
✅ Webpack-like behavior
npm i vite-plugin-dynamic-import -Dimport dynamicImport from 'vite-plugin-dynamic-import'
export default {
plugins: [
dynamicImport(/* options */)
]
}cases 👉 vite-plugin-dynamic-import/test
dynamicImport({
filter(id) {
// `node_modules` is exclude by default, so we need to include it explicitly
// https://github.com/vite-plugin/vite-plugin-dynamic-import/blob/v1.3.0/src/index.ts#L133-L135
if (id.includes('/node_modules/foo')) {
return true
}
}
})dynamicImport([options])
export interface Options {
filter?: (id: string) => boolean | void
/**
* ```
* 1. `true` - Match all possibilities as much as possible, more like `webpack`
* see https://webpack.js.org/guides/dependency-management/#require-with-expression
*
* 2. `false` - It behaves more like `@rollup/plugin-dynamic-import-vars`
* see https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#how-it-works
* ```
*
* @defaultValue true
*/
loose?: boolean
/**
* If you want to exclude some files
* e.g `type.d.ts`, `interface.ts`
*/
onFiles?: (files: string[], id: string) => typeof files | void
/**
* Custom importee
*
* e.g. - append `\/*@vite-ignore*\/` in front of importee to bypass to Vite
*/
onResolve?: (rawImportee: string, id: string) => typeof rawImportee | void
}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 importer
// 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, you 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');
+ }
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent