14-vite的 global-import批量引入文件功能

vite的global-import 批量导入功能

1. 功能

• 使用正则表达式来引入一组js文件，而不是一个js文件

2. 举例

// 有一个 gloabl 文件夹，里面有 a.js a.json b.js b.json test-1.js// 内容都是很简单的内容constglobalModule=import.meta.glob('./glob/*')Object.entries(globalModule).forEach(([k,v])=>{v().then((m)=>console.log(k+':'+m.default))})/** 打印结果 ./glob/a.js:a ./glob/a.json:[object Object] ./glob/b.js:b ./glob/b.json:[object Object] ./glob/test-1.js:test-1 */

3. 使用场景

• 多语言支持，在某个文件夹下面有一些语法文件，后来我们又新增一些相同格式的语言文件

4. 注意：

• const globalModule = import.meta.glob(‘./glob/*’)
• 上面的 * 号，可以跟 *.js,表示仅取 js 文件 或者 *.json 仅表示 JSON 文件
• 可以这样选取文件 import.meta.glob(‘./glob/*-[1-9].js’) 表示仅取 test-1.js 文件
• 不是 es 的标准，是 vite 提供的功能
• 编译情况

5. 其他用法

• 编译情况

  // 编译前constglobalModule1=import.meta.glob('./glob/*-[1-9].js')// 编译后constglobalModule1=/* #__PURE__ */Object.assign({"./glob/test-1.js":()=>import("/src/glob/test-1.js")})

• 上面是异步引入，我们后续想要得到模块具体的方法，还要通过.then
  我们还可以直接使用 globEager, 在编译时就已经把代码引入, 目前测试看这块的 api 报错了

  constglobalModule2=import.meta.globEager('./glob/*')console.log('ccc',globalModule2);