{"id":13417219,"url":"https://github.com/vite-plugin/vite-plugin-dynamic-import","last_synced_at":"2025-05-15T16:04:19.263Z","repository":{"id":37758857,"uuid":"491906687","full_name":"vite-plugin/vite-plugin-dynamic-import","owner":"vite-plugin","description":"Enhance Vite builtin dynamic import","archived":false,"fork":false,"pushed_at":"2024-09-16T14:27:37.000Z","size":187,"stargazers_count":210,"open_issues_count":14,"forks_count":12,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-05-15T03:09:59.529Z","etag":null,"topics":["dyanmic","import","plugin","vite"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/vite-plugin-dynamic-import","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vite-plugin.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-05-13T13:23:58.000Z","updated_at":"2025-05-13T16:16:32.000Z","dependencies_parsed_at":"2024-01-07T18:04:33.040Z","dependency_job_id":"58f909b7-2014-4bfc-a702-4afd85eec014","html_url":"https://github.com/vite-plugin/vite-plugin-dynamic-import","commit_stats":{"total_commits":148,"total_committers":4,"mean_commits":37.0,"dds":0.3513513513513513,"last_synced_commit":"56db03b91077df7931affac5db3b4479fd896888"},"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vite-plugin%2Fvite-plugin-dynamic-import","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vite-plugin%2Fvite-plugin-dynamic-import/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vite-plugin%2Fvite-plugin-dynamic-import/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vite-plugin%2Fvite-plugin-dynamic-import/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vite-plugin","download_url":"https://codeload.github.com/vite-plugin/vite-plugin-dynamic-import/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254374404,"owners_count":22060609,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dyanmic","import","plugin","vite"],"created_at":"2024-07-30T22:00:34.080Z","updated_at":"2025-05-15T16:04:19.242Z","avatar_url":"https://github.com/vite-plugin.png","language":"TypeScript","funding_links":[],"categories":["Plugins","TypeScript"],"sub_categories":["Framework-agnostic Plugins"],"readme":"# vite-plugin-dynamic-import\n\nEnhance Vite builtin dynamic import\n\n[![NPM version](https://img.shields.io/npm/v/vite-plugin-dynamic-import.svg)](https://npmjs.org/package/vite-plugin-dynamic-import)\n[![NPM Downloads](https://img.shields.io/npm/dm/vite-plugin-dynamic-import.svg)](https://npmjs.org/package/vite-plugin-dynamic-import)\n[![awesome-vite](https://awesome.re/badge.svg)](https://github.com/vitejs/awesome-vite)\n\nEnglish | [简体中文](https://github.com/vite-plugin/vite-plugin-dynamic-import/blob/main/README.zh-CN.md)\n\n✅ Alias  \n✅ Bare module(node_modules)  \n✅ Compatible `@rollup/plugin-dynamic-import-vars` [limitations](https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations)  \n✅ Webpack-like behavior  \n\n## Install\n\n```bash\nnpm i vite-plugin-dynamic-import -D\n```\n\n## Usage\n\n```javascript\nimport dynamicImport from 'vite-plugin-dynamic-import'\n\nexport default {\n  plugins: [\n    dynamicImport(/* options */)\n  ]\n}\n```\n\ncases 👉 [vite-plugin-dynamic-import/test](https://github.com/vite-plugin/vite-plugin-dynamic-import/blob/main/test)\n\n#### node_modules\n\n```js\ndynamicImport({\n  filter(id) {\n    // `node_modules` is exclude by default, so we need to include it explicitly\n    // https://github.com/vite-plugin/vite-plugin-dynamic-import/blob/v1.3.0/src/index.ts#L133-L135\n    if (id.includes('/node_modules/foo')) {\n      return true\n    }\n  }\n})\n```\n\n## API\n\ndynamicImport([options])\n\n```ts\nexport interface Options {\n  filter?: (id: string) =\u003e boolean | void\n  /**\n   * ```\n   * 1. `true` - Match all possibilities as much as possible, more like `webpack`\n   * see https://webpack.js.org/guides/dependency-management/#require-with-expression\n   * \n   * 2. `false` - It behaves more like `@rollup/plugin-dynamic-import-vars`\n   * see https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#how-it-works\n   * ```\n   * \n   * @defaultValue true\n   */\n  loose?: boolean\n  /**\n   * If you want to exclude some files  \n   * e.g `type.d.ts`, `interface.ts`\n   */\n  onFiles?: (files: string[], id: string) =\u003e typeof files | void\n  /**\n   * Custom importee\n   * \n   * e.g. - append `\\/*@vite-ignore*\\/` in front of importee to bypass to Vite\n   */\n  onResolve?: (rawImportee: string, id: string) =\u003e typeof rawImportee | void\n}\n```\n\n## How and why?\n\n*We assume that the project structure is as follows*\n\n```tree\n├─┬ src\n│ ├─┬ views\n│ │ ├─┬ foo\n│ │ │ └── index.js\n│ │ └── bar.js\n│ └── router.js\n└── vite.config.js\n```\n\n```js\n// vite.config.js\nexport default {\n  resolve: {\n    alias: {\n      // \"@\" -\u003e \"/User/project-root/src/views\"\n      '@': path.join(__dirname, 'src/views'),\n    },\n  },\n}\n```\n\n*Dynamic import is not well supported in Vite, such as*\n\n- Alias are not supported\n\n```js\n// router.js\n❌ import(`@/views/${variable}.js`)\n```\n\n- Must be relative\n\n```js\n// router.js\n❌ import(`/User/project-root/src/views/${variable}.js`)\n```\n\n- Must have extension\n\n```js\n// router.js\n❌ import(`./views/${variable}`)\n```\n\n*We try to fix these problems*\n\nFor the alias in `import()`, we can calculate the relative path according to `importer`\n\n```js\n// router.js\n✅ import(`./views/${variable}.js`)\n```\n\nIf 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.  \nSo we need to list all the possibilities\n\n1. 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)\n\n`./views/${variable}` -\u003e `./views/*`\n\n2. generate runtime code\n\n```diff\n- // import(`./views/${variable}`)\n+ __variableDynamicImportRuntime(`./views/${variable}`)\n\n+ function __variableDynamicImportRuntime(path) {\n+   switch (path) {\n+     case 'foo':\n+     case 'foo/index':\n+     case 'foo/index.js':\n+       return import('./views/foo/index.js');\n+ \n+     case 'bar':\n+     case 'bar.js':\n+       return import('./views/bar.js');\n+ }\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvite-plugin%2Fvite-plugin-dynamic-import","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvite-plugin%2Fvite-plugin-dynamic-import","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvite-plugin%2Fvite-plugin-dynamic-import/lists"}