如果想引入一个文件夹下的所有文件可以通过 import.meta.glob() 函数获得

此功能基于：fast-glob

使用 glob-import

  • 创建一个文件夹，下面存放一些文件

image.png

  1. // a.js
  2. export default 'a'
  4. // a.json
  5. {
  6.   "data": "a"
  7. }
  9. // b.js
  10. export default 'b'
  12. // b.json
  13. {
  14.   "data": "b"
  15. }
  17. // test-1.js
  18. export default 'test'
  • 获取文件内容 ```javascript const globalModules = import.meta.glob(‘./glob/*’) console.log(globalModules)

Object.entries(globalModules).forEach(function ([k, v]) { console.log(k + ‘——‘ + v) v().then((m) => { console.log(m.default) }) })

  1. ![image.png](https://cdn.nlark.com/yuque/0/2021/png/243804/1636891944784-92607b4d-58f8-4f9e-848d-1e8733f65a75.png#clientId=u8ec3c9b1-48fc-4&from=paste&height=169&id=u63d35a92&margin=%5Bobject%20Object%5D&name=image.png&originHeight=508&originWidth=1676&originalType=binary&ratio=1&size=85005&status=done&style=none&taskId=uc3b164ad-3d95-458b-9118-33b3f8d4cef&width=558.6666666666666)
  2. <a name="JocBI"></a>
  3. # 匹配方式
  5. - 匹配文件夹下的所有文件 `'./glob/*'` 
  6. - 匹配文件夹下的 js 文件 `'./glob/*.js'` 
  7. - 使用则正匹配文件 `'./glob/*-[0-9].js'`
  8. <a name="kEkda"></a>
  9. # 注意
  10. 这是 vite 专属的功能，换成其他框架编译不生效
  12. 编译完成之后是返回的文件 key-value 值<br />![image.png](https://cdn.nlark.com/yuque/0/2021/png/243804/1636892431908-f5084e96-b8a1-45cd-ae67-4abd1e33ddc4.png#clientId=u8ec3c9b1-48fc-4&from=paste&height=331&id=u28c4be59&margin=%5Bobject%20Object%5D&name=image.png&originHeight=992&originWidth=1546&originalType=binary&ratio=1&size=202097&status=done&style=none&taskId=uade67541-17dc-4fe8-aa01-43985640f1d&width=515.3333333333334)
  13. <a name="ozDp6"></a>
  14. # globEager
  15. 直接把代码编译进来，不需要异步引入
  16. ```javascript
  17. const globalModules = import.meta.globEager('./glob/*-[0-9].js')
  18. console.log(globalModules)

image.png

  • 编译的源码中：

image.png