webpack批量導入

• webpack中使用 require.context 實現自動導入

const files = require.context('./modules', false, /\.ts$/);
const modules = {};
files.keys().forEach((key) => {if (key === './index.ts') { return; }modules[key.replace(/(\.\/|\.ts)/g, '')] = files(key).default;
});
export default modules;

vite批量導入

• vite中使用 import.meta.glob 實現自動導入

//Vite 支持使用特殊的 import.meta.glob 函數從文件系統導入多個模塊：
const modules = import.meta.glob('./dir/*.js')
//以上將會被轉譯為下面的樣子：
// vite 生成的代碼
const modules = {'./dir/foo.js': () => import('./dir/foo.js'),'./dir/bar.js': () => import('./dir/bar.js')
}
//你可以遍歷 modules 對象的 key 值來訪問相應的模塊：
for (const path in modules) {modules[path]().then((mod) => {console.log(path, mod)})
}
//匹配到的文件默認是懶加載的，通過動態導入實現，并會在構建時分離為獨立的 chunk。如果你傾向于直接引入所有的模塊（例如依賴于這些模塊中的副作用首先被應用），
//你可以傳入 { eager: true } 作為第二個參數：
const modules = import.meta.glob('./dir/*.js', { eager: true })
//以上會被轉譯為下面的樣子：
// vite 生成的代碼
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
}
//具名導入,也可能你只想要導入模塊中的部分內容，那么可以利用 import 選項。
const modules = import.meta.glob('./dir/*.js', { import: 'setup' })
// vite 生成的代碼
const modules = {'./dir/foo.js': () => import('./dir/foo.js').then((m) => m.setup),'./dir/bar.js': () => import('./dir/bar.js').then((m) => m.setup)
}
//當與 eager 一同存在時，甚至可能可以對這些模塊進行 tree-shaking。
const modules = import.meta.glob('./dir/*.js', { import: 'setup', eager: true })