Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vite-plugin/vite-plugin-dynamic-import
Enhance Vite builtin dynamic import
https://github.com/vite-plugin/vite-plugin-dynamic-import
dyanmic import plugin vite
Last synced: 4 days ago
JSON representation
Enhance Vite builtin dynamic import
- Host: GitHub
- URL: https://github.com/vite-plugin/vite-plugin-dynamic-import
- Owner: vite-plugin
- License: mit
- Created: 2022-05-13T13:23:58.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-09-16T14:27:37.000Z (4 months ago)
- Last Synced: 2024-12-19T19:01:12.782Z (12 days ago)
- Topics: dyanmic, import, plugin, vite
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/vite-plugin-dynamic-import
- Size: 183 KB
- Stars: 195
- Watchers: 3
- Forks: 11
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# vite-plugin-dynamic-import
Enhance Vite builtin dynamic import
[](https://npmjs.org/package/vite-plugin-dynamic-import)
[](https://npmjs.org/package/vite-plugin-dynamic-import)
[](https://github.com/vitejs/awesome-vite)
English | [简体中文](https://github.com/vite-plugin/vite-plugin-dynamic-import/blob/main/README.zh-CN.md)
✅ Alias
✅ Bare module(node_modules)
✅ Compatible `@rollup/plugin-dynamic-import-vars` [limitations](https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations)
✅ Webpack-like behavior
## Install
```bash
npm i vite-plugin-dynamic-import -D
```
## Usage
```javascript
import dynamicImport from 'vite-plugin-dynamic-import'
export default {
plugins: [
dynamicImport(/* options */)
]
}
```
cases 👉 [vite-plugin-dynamic-import/test](https://github.com/vite-plugin/vite-plugin-dynamic-import/blob/main/test)
#### node_modules
```js
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
}
}
})
```
## API
dynamicImport([options])
```ts
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
}
```
## How and why?
*We assume that the project structure is as follows*
```tree
├─┬ src
│ ├─┬ views
│ │ ├─┬ foo
│ │ │ └── index.js
│ │ └── bar.js
│ └── router.js
└── vite.config.js
```
```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
```js
// router.js
❌ import(`@/views/${variable}.js`)
```
- Must be relative
```js
// router.js
❌ import(`/User/project-root/src/views/${variable}.js`)
```
- Must have extension
```js
// 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`
```js
// router.js
✅ import(`./views/${variable}.js`)
```
If the import path has no suffix, we use **[glob](https://www.npmjs.com/package/fast-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
1. transpire dynamic import variable, you can see [@rollup/plugin-dynamic-import-vars](https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#how-it-works)
`./views/${variable}` -> `./views/*`
2. generate runtime code
```diff
- // 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');
+ }
```