DEPRECATED: This plugin has be ported to back to Vite v3.0.
The design experiment for import.meta.glob from Vite.
There are quite some scenarios that import.meta.glob wasn't considered when it's been implemented at the beginning. So we received quite a few PRs to improve it.
However, some design considerations might conflict with each other. For example, #2495 support ignore option for glob import supports the ignore glob as a second argument, while in #6953 import.meta.glob support ?raw we uses the second argument to specify glob query (and later been changed to { as } via #7215 deprecate { assert: { type: raw }} in favor of { as: raw }).
There are several other PRs that touches it's design as well:
With these two TC39 proposals (import-reflection and import-assertions) not settled yet, combining with different needs and design tradeoffs in each PR, making the good API design for import.meta.glob directly in Vite core becoming harder and more and more complex than it could be (with the cautions to not break existing usages).
On top of that, in Vite we are having multiple macros for different options:
import.meta.globimport.meta.globEagerimport.meta.globEagerDefault(undocumented)
That results in a quite large API surface to maintain and make the future extension harder. For example, if we want import.meta.globNamed we might also need to add import.meta.globEagerNamed, making the counts to 5.
Thus I propose to experiment with the import.meta.glob as an external plugin so we could introduce breaking change more easier and ships the implementation much faster (in Vite it takes days for a change to be meraged, and weeks to months for it to be landed in stable release). And when we feel the new design is able to cover most of the use cases, then we could embed it into Vite core as a one-time breaking change in v3.0.
- Globing for multiple patterns
- Globing ignore
- HMR on file modification / addition / deletion
- Ability to provide custom queries
- Ability to only import default / named export
- An unified API for different options
- Vite alias
- (Optional) Takeover Vite's
import.meta.glob - Experiments
npm i -D vite-plugin-glob// vite.config.ts
import { defineConfig } from 'vite'
import GlobPlugin from 'vite-plugin-glob'
export default defineConfig({
plugins: [
GlobPlugin({
// enable to let this plugin interpret `import.meta.glob`
// takeover: true,
}),
],
})The API is named as
import.meta.importGlobto avoid conflict with Vite'simport.meta.globin this implementation.
const modules = import.meta.importGlob('./dir/*.js')
/* {
'./dir/foo.js': () => import('./dir/foo.js'),
'./dir/bar.js': () => import('./dir/bar.js'),
} */const modules = import.meta.importGlob([
'./dir/*.js',
'./another/dir/*.js',
])
/* {
'./dir/foo.js': () => import('./dir/foo.js'),
'./dir/bar.js': () => import('./dir/bar.js'),
'./another/dir/index.js': () => import('./another/dir/index.js'),
} */Globs start with ! will be matched to exclude.
const modules = import.meta.importGlob([
'./dir/*.js',
'!**/index.js',
])Import the modules as static imports.
const modules = import.meta.importGlob('./dir/*.js', { eager: true })
/*
import * as __glob__0_0 from './dir/foo.js'
import * as __glob__0_1 from './dir/bar.js'
const modules = {
'./dir/foo.js': __glob__0_0,
'./dir/bar.js': __glob__0_1
}
*/const modules = import.meta.importGlob('./dir/*.js', { as: 'raw' })
/* {
'./dir/foo.js': () => import('./dir/foo.js?raw'),
'./dir/bar.js': () => import('./dir/bar.js?raw'),
} */It's possible to only import parts of the modules with the import options.
const setups = import.meta.importGlob('./dir/*.js', { import: 'setup' })
/* {
'./dir/foo.js': () => import('./dir/foo.js').then(m => m.setup),
'./dir/bar.js': () => import('./dir/bar.js').then(m => m.setup),
} */Combining with eager, it's even possible to have tree-shaking enable for those modules.
const setups = import.meta.importGlob('./dir/*.js', { import: 'setup', eager: true })
/*
import { setup as __glob__0_0 } from './dir/foo.js'
import { setup as __glob__0_1 } from './dir/bar.js'
const setups = {
'./dir/foo.js': __glob__0_0,
'./dir/bar.js': __glob__0_1
}
*/Set export to default to import the default export.
const modules = import.meta.importGlob('./dir/*.js', { import: 'default', eager: true })
/*
import __glob__0_0 from './dir/foo.js'
import __glob__0_1 from './dir/bar.js'
const modules = {
'./dir/foo.js': __glob__0_0,
'./dir/bar.js': __glob__0_1
}
*/const setups = import.meta.importGlob('./dir/*.js', { query: { foo: 'bar', bar: true } })
/* {
'./dir/foo.js': () => import('./dir/foo.js?foo=bar&bar=true&lang.js').then(m => m.setup),
'./dir/bar.js': () => import('./dir/bar.js?foo=bar&bar=true&lang.js').then(m => m.setup),
} */The following features are in experiments, feedbacks are greatly welcome!
Append fake &lang.(ext) when queries are specified, to preseve the file extension for following plugins to process.
Learn more at Discussions
This is disabled by default since v0.3.0. To enable it, pass restoreQueryExtension: true to plugin options.
Add to tsconfig.json
{
"compilerOptions": {
"types": [
"vite-plugin-glob/client",
// with takeover enabled
// "vite-plugin-glob/takeover"
]
}
}You can use generic to specify the type of the modules.
interface SomeModule {
name: string
default: { /* ... */ }
}
import.meta.importGlob<SomeModule>('./dir/*.js')
MIT License © 2021 Anthony Fu
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent